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]
  });
}

我认为这将解决您的问题

重用表单时表单验证无效

1 个答案: