Formularvalidierung funktioniert nicht bei der Wiederverwendung von Formular

Question

Ich habe eine Formularkomponente, wo ich es zum Hinzufügen und Bearbeiten verwendet. Jedoch gibt es ein Problem nicht sicher, wie man es anspricht

der oben genannte Code ist selbsterklärend. Nicht zu vergessen zu erwähnen, wenn das Formular bearbeitet werden soll, habe ich die Felder mit ngModel ausgefüllt, so dass der Benutzer bearbeiten kann.

Die Aktualisierungsschaltfläche sollte nicht deaktiviert werden, wenn das Formular gültig ist (dh alle Felder gültig sind) .. aber so weit ich getestet habe, funktioniert !experienceForm.valid nicht, wenn das Formular für EDITING aufgerufen wird, wenn ich es ersetze mit irgendeinem der Attribute touch oder dirty, wie [disabled]="!experiencForm.dirty" dann funktioniert es. aber irgendwie valid wird nicht ausgelöst, wenn ich alle Felder neu eingabe.

wie Sie dieses Problem angehen! Unten habe ich eine Probe des gesamten Code zur Verfügung gestellt:

.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 löst nicht hier für die Schaltfläche 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

Es ist besser, nicht formControlName und ngModel zusammen verwenden. Sie können Formularwerte als

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

denken ordne ich dies Ihr Problem lösen