フォームの再利用時にフォームの検証が機能しない

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は、フォームがEDITINGのために呼び出されたとき属性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] 
    }); 
} 

としてフォームの値を割り当てることができます