Comment valider un générateur de formulaire en l'éditant lorsqu'il contient des valeurs pré-remplies?

Question

J'utilise un formulaire angulaire 4 et un composant de groupe de formulaire pour créer un formulaire de données d'ajout/de modification. Je suis en mesure de valider correctement à l'ajout de nouvelles données, mais ayant des problèmes lors de l'édition du même formulaire avec des champs d'entrée déjà remplis.

Ci-dessous le code est d'une partie des composants:

this.saveNotification = this.formBuilder.group({ 
    id: '', 
    name: ['', Validators.required], 
    question: ['', Validators.required], 
    repeatTypesControl: ['', Validators.required], 
    remindAt: '', 
}); 

if(this.isUpdateCheck){///pre-filled form on Edit 
    this.saveNotification.patchValue({ 
    id: 4, 
    name: "Deck", 
    question: "Who's Deck is this?", 
    remindAt: "08:30pm", 
    }); 

this.saveNotification.updateValueAndValidity(); 
    for (var i in this.saveNotification.controls) { 
    this.saveNotification.controls[i].markAsTouched(); 
    } 

Ci-dessous le code est d'une partie du modèle:

<button ion-button color="secondary" type="submit" [disabled]="(!saveNotification.valid)" color="dark">SAVE</button> 

Je suis toujours trouvé la valeur comme fausse saveNotification.valid car à la modification des valeurs obtiennent par - rempli de composant. J'ai essayé this.saveNotification.controls [i] .markAsTouched() mais cela n'a pas fonctionné.

Answer 1

Insed de

this.saveNotification.patchValue({ 
    id: 4, 
    name: "Deck", 
    question: "Who's Deck is this?", 
    remindAt: "08:30pm" 
}); 

Utilisez

this.saveNotification.controls['id'].setValue(4); 
this.saveNotification.controls['name'].setValue('Deck'); 
this.saveNotification.controls['question'].setValue('Who's Deck is this?'); 
this.saveNotification.controls['remindAt'].setValue('08:30pm');