爲什麼表單驗證是給這個錯誤錯誤：ngModel不能用於與父母formGroup指令

Question

嗨，我得到這個error

Error: ngModel cannot be used to register form controls with a parent formGroup directive

我試圖做基本驗證了form註冊表單控件inputs

這裏是我的form

<form [formGroup]="formgroup"> 

    <ion-item> 
     <ion-label floating>First Name</ion-label> 
     <ion-input type="text" formControlName="firstname" [(ngModel)]= "userData.firstname" ></ion-input> 
    </ion-item> 

    <ion-item *ngIf="firstname.hasError('required') && firstname.touched"> 
     <p>*First Name Is Required</p> 
    </ion-item> 

    <ion-item> 
     <ion-label floating>Last Name</ion-label> 
     <ion-input type="text" formControlName="lastname" [(ngModel)]= "userData.lastname" ></ion-input> 
    </ion-item> 

    <ion-item *ngIf="lastname.hasError('required') && lastname.touched"> 
     <p>*First Name Is Required</p> 
    </ion-item> 

</form> 

這裏是我的控制器代碼

import {FormBuilder,FormGroup,Validators,AbstractControl,FormControl} from '@angular/forms'; 

    export class Form1Page { 

     formgroup:FormGroup; 
     firstname:AbstractControl; 
     lastname:AbstractControl; 

     userData = {"firstname":"", "lastname":""}; 

     constructor(public navCtrl: NavController, public navParams: NavParams,public formBuilder:FormBuilder) { 

     this.formgroup = formBuilder.group({ 
       firstname:['',Validators.required,Validators.minLength(5)], 
       lastname:['',Validators.required,Validators.maxLength(15)] 
     }); 

     this.firstname = this.formgroup.controls['firstname']; 

     this.firstname = this.formgroup.controls['lastname']; 

     this.userData.dateOfBirth = new Date().toISOString(); 
     } 

} 

請幫我擺脫這些error

感謝提前！

Answer 1

您有錯誤類型的控件。你2次分配到firstname，所以你的lastname保持不初始化。將第二個更改爲lastname。

更換

this.firstname = this.formgroup.controls['firstname']; 
this.firstname = this.formgroup.controls['lastname']; 

與

this.firstname = this.formgroup.controls['firstname']; 
this.lastname = this.formgroup.controls['lastname']; 

的文檔Angular Reactive Forms。