首页 文章

为什么表单验证给出此错误错误:ngModel 不能用于向父 formGroup 指令注册表单控件

提问于
浏览
1

嗨,我得到这个error

错误:ngModel 不能用于向父 formGroup 指令注册表单控件

我正在尝试为form inputs进行基本验证

这是我的表格

<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

提前致谢!!!

1 回答

  • 2

    你有错误的控件。你 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'];
    

    角反应形式的文档。

相关问题