web-dev-qa-db-fra.com

Comment puis-je détecter/regarder le "statut sale" d'une forme angulaire2 de la bonne manière?

J'ai un formulaire dans Angular2 (par exemple)

<form id="myLovelyForm" name="myLovelyForm" #myLovelyForm="ngForm">
    <label [attr.for]="myLovelyCheckbox">
      <input [attr.id]="myLovelyCheckbox" type="checkbox"
             [(ngModel)]="myLovelyCheckbox">
      <span class="myLovelyCheckbox">myLovelyCheckbox</span>
    </label>
</form>

et une animation, qui devrait commencer si le formulaire est sale:

<div 
    id="myLovelyNotification" 
    class="myLovelyNotification" 
    [@notification]="myLovelyForm.form.dirty">
.....
.....
</div>

L'animation fonctionne correctement si je mets [@notification] = true, mais mon myLovelyForm.dirty ne se déclenche pas si je touche le formulaire et modifie un élément.

Si la @ notification est fausse, l’animation s’arrête, c’est-à-dire que si la case à cocher a été cochée auparavant et que je la désélectionne par erreur et que je la sélectionne à nouveau, le formulaire n’est pas vierge (touché) mais non plus sale, l’animation doit donc s’arrêter. Si je définis manuellement @notification = false, cela fonctionne correctement.

La grande question est: comment puis-je détecter/regarder le "statut sale" d'une forme angulaire2 de la bonne manière?

formsangular
8
Lonely

Vous pouvez vous abonner pour modifier les formulaires:

this.physicalForm.valueChanges
   .map((value) => {
      return value;
   })
   .subscribe((value) => {
      if(this.selectedPhysical.weight != this.physicalForm.value.weight)  {      
        this.selectedPhysical.weight = this.physicalForm.value.weight;
      }
      this.isDirty == this.physicalForm.touched;
   });

Si cet événement se déclenche, alors vous savez que votre formulaire est sale.

voici un exemple tiré de mon application actuelle (nut.abbr est le formcontrolName):

ngOnInit() {
   for (let nut of this.userSettings.nutrientData) {
      this.foodSettingsForm.controls[nut.abbr].valueChanges
         .subscribe(v => { console.log("value: ", v); this.completeValueChange(nut.abbr, v); });
   }
}

completeValueChange(field: string, value: boolean) {
   this.isChanged = true;
   Nutrient.updateNutrient(field, value, this.userSettings.nutrientData);
}
2
John Baird

Simplement -

@ViewChild('f') templateForm: any;


ngOnInit() {
    this.templateForm.valueChanges.subscribe((value: any) => {
        if (this.templateForm.dirty) {
            console.log('template form dirty - yes: ', value);
        } else {
            console.log('template form dirty - no: ');
        }
    });
}

Où votre modèle contient:

 <form  #f="ngForm" (ngSubmit)="save(f)>
    ...
 </form>

Cependant, cela continue à utiliser des modèles de formulaires qui sont vraiment là pour aider à combler le fossé avec les applications Angular1. Les formulaires pilotés par modèle constituent la Angular 2 manière de le faire pour des applications autres que les applications de base réelles. Voir par exemple:

4
HankCa