nasıl/saatini tespit doğru şekilde bir angular2-formun "kirli-durumu" olabilir?

Question

I Angular2 bir şekle sahip (örneğin)

<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> 

ve form kirli ise, başlamalı bir animasyon:

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

I set halinde animasyon düzgün çalıştığını [@notification] = true, ancak forma dokunup bir öğeyi değiştirirsem myLovelyForm.dirty'um patlamıyor.

@notification yanlışsa, animasyon durur, yani onay kutusu daha önce seçilmişse ve yanlışlıkla seçimini iptal edip tekrar seçtiğimde, form bozulmamış (dokunuldu), ancak artık kirlenmez, bu nedenle animasyon durmalıdır . @notification = false öğesini elle ayarladıysam düzgün çalışır.

büyük soru: Nasıl doğru bir şekilde izlemek/Bir angular2-formun "kirli-durumu" tespit edebilir?

Answer 1

Değişiklikleri oluşturmak için abone olabilirsiniz:

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

bu olay yangınlar, o zaman biliyor Formunuz kirlidir.

bu

benim gerçek uygulamasından bir örnektir (nut.abbr formcontrolName ise): -: Ancak

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

Basitçe

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

Answer 2

sizin şablon içeren

@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: '); 
     } 
    }); 
} 

Bu hala Angular1 uygulamaları ile boşluğu kapatmaya yardımcı olacak şablon formlarını kullanıyor. Model Tahrikli formlar, herhangi bir şey için gerçek basit uygulamalar yapmak için Açısal 2 yoludur.

• https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html
• http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• Ve gerçekten uzatmak ve uygulamanızı Excell için özel bileşenleri kullanmak - https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html