表單驗證在重用表單時不起作用

我有一個表單組件，我用它來添加和編輯。然而有一個問題不知道如何解決它表單驗證在重用表單時不起作用

<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填充字段，以便用戶可以編輯。

如果窗體有效（意味着所有字段當前有效），則不應禁用更新按鈕..但就我測試而言，當調用表單調用EDITING時，此!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>

來源

2017-05-09 Yasir

這是更好地不要一起使用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] 
    }); 
}

我認爲這將解決您的問題

來源

2017-05-09 12:25:36 sainu

表單驗證在重用表單時不起作用

回答

相關問題