重用表单时表单验证不起作用

Question

我有一个表单组件，我用它来添加和编辑。但是有一个问题不知道如何解决

<button *ngIf="!editMode" ion-button type="submit" [disabled]="!experienceForm.valid" (click)="save(experienceForm)">
    Save
</button>
<button *ngIf="editMode" ion-button type="submit" [disabled]="!experienceForm.valid" (click)="update(experienceForm)">
    Update
</button>

以上代码是不言自明的。不要忘记提及，如果表单用于编辑，我已经使用 ngModel 填充了字段，以便用户可以编辑。

如果表单有效（意味着所有字段当前有效），则不应禁用更新按钮。但据我测试，当调用表单进行编辑时，此 !experienceForm.valid 不起作用，如果我用任何属性 touch 或 dirty 替换它，例如 [disabled]="!experiencForm.dirty" 那么它的工作。但不知何故 valid 不会触发，除非我重新输入所有字段。

如何解决这个问题！下面我提供了所有代码的示例：

.ts:

constructor(...){
   this.userId = navParams.get('userId');    // get passed params
   this.userExp = navParams.get('userExperience'); // get passed params

   this.experienceForm = this.formBuilder.group({
      myInput1 : ['', Validators.required],
      myInput2: ['', Validators.required]
}
ionViewDidLoad(){
   if(this.userExp !== 'null'){        // if not null , then Its for editing
     this.editMode = true;
     this.myInputModel1 = this.userExp.value; // populating the fields
     this.myInputModel2 = this.userExp.value;
   }
}

.html: // !experience.valid 不会在此处触发按钮 Update

<form [formGroup]="experienceForm" novalidate>
  <ion-item>
      <ion-label class="labels" floating>First</ion-label>
      <ion-input type="text" formControlName="myInput1" [(ngModel)]="myInputModel1"></ion-input>
    </ion-item>
   ///

  <button *ngIf="!editMode" ion-button type="submit" [disabled]="!experienceForm.valid" (click)="save(experienceForm)">
    Save
  </button>
  <button *ngIf="editMode" ion-button type="submit" [disabled]="!experienceForm.valid && !experienceForm.dirty" (click)="update(experienceForm)">
    Update
  </button>
</form>

Answer 1

formControlName和ngModel最好不要一起使用。您可以将表单值分配为

ionViewDidLoad(){
   if(this.userExp !== 'null'){        // if not null , then Its for editing
     this.editMode = true;

    this.experienceForm = this.formBuilder.group({
      myInput1 : [this.userExp.value, Validators.required],
      myInput2: [this.userExp.value, Validators.required]
  });
}

我想这会解决你的问题

重用表单时表单验证不起作用

Form validation not working when reusing form

ionic2

angular2-forms