'form'の既知のプロパティではないため、 'formGroup'にバインドできません。角4で

Question

私はFormsModule、ReactiveFormsModuleをインポートし、インポートで宣言された 'form'.butの既知のプロパティではないので、' formGroup 'にバインドできないようなエラーが出ましたが、同じエラーが発生しました。私のおかげ 私のコードは次のとおりです。

  <form [formGroup]="loginForm" (submit)="login()" class="md-form-auth form-validation" (keypress)="keyDownFunction($event)"> 
       <fieldset> 
        <div class="form-group"> 
         <md-input-container class="full-width md-icon-left"> 
          <md-icon class="material-icons">mail_outline</md-icon> 
          <input mdInput type="email" placeholder="Email" 
            formControlName="Username"> 
         </md-input-container> 
        </div> 
        <div class="form-group"> 
         <md-input-container class="full-width md-icon-left"> 
          <md-icon class="material-icons">lock_outline</md-icon> 
          <input mdInput type="password" placeholder="Password" 
            formControlName="Password"> 
         </md-input-container> 
        </div> 

        <button [disabled]="!loginForm.valid" md-raised-button type="button" color="primary" class="float-right"> 
         Login 
        </button> 
       </fieldset> 
      </form> 

Answer 1

あなたがコンポーネントでloginForm formgroupを作成していないようです。

次のコードで作成できます。あなたのログインにこのコードをコピーするコンポーネントとエラーは消えます。

export class LoginComponent implements OnInit { private loginForm : FormGroup; 
    loading:boolean = false; 
    constructor(private formBuilder: FormBuilder) { 
     this.loginForm = this.formBuilder.group({ 
      Username: ['', [Validators.required]], 
      Password: ['',[Validators.required]] 
     }); 
    } 
} 

Answer 2

それはあなたがReactiveFormsModuleを利用するモデル駆動型フォームの使用を作っている、テンプレート駆動型フォームのためだ、FormsModule忘れます。そのモジュールをインポートせずに[formGroup]プロパティバインディングを使用しようとすると、そのエラーがスローされます。時にはモジュールをインポートすることもありますが、実際にインポート配列に追加することは忘れてしまいます。このコンポーネントが宣言されているモジュールのインポート配列にReactiveFormsModuleを追加していないことは明らかです。もう一度チェックしてインポートに追加すれば、問題は解決します。