與初始狀態相同的角度形式變髒

我正在使用angular來創建如下所示的簡單輸入形式。與初始狀態相同的角度形式變髒

我想知道如果有人知道我的方式跟蹤，我會打電話，如果用戶更改控件值，然後恢復到原來的「真實」狀態的髒或不。

所以在加載我的「名稱」屬性=「約翰」。

然後用戶刪除一個字符，使名稱屬性「Jon」現在我的contactForm很髒。

如果用戶將光標放回並重新鍵入「h」name =「John」，即使處於原始狀態，我的contactForm仍然很髒？

import { FormControl } from '@angular/forms'; 
import { FormBuilder, AbstractControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; 
import { ContactDetail } from './../../../models/contact-details.model'; 
import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'contact-edit-edit-body', 
    templateUrl: './contact-edit-edit-body.component.html', 
    styleUrls: ['./contact-edit-edit-body.component.css'] 
}) 
export class ContactEditEditBodyComponent implements OnInit { 
    @Input() contact: ContactDetail = new ContactDetail(0); 

    contactForm: FormGroup; 
    name: AbstractControl; 
    phoneNumber: AbstractControl; 
    emailAddress: AbstractControl; 

    constructor(fb: FormBuilder) { 
    this.contactForm = fb.group({ 
     "name": [this.contact.name], 
     "phoneNumber": [this.contact.phoneNumber], 
     "emailAddress": [this.contact.emailAddress] 
    }); 

    this.name = this.contactForm.controls['name']; 
    this.phoneNumber = this.contactForm.controls['phoneNumber']; 
    this.emailAddress = this.contactForm.controls['emailAddress']; 
    } 

    ngOnInit() { 

    } 
}

來源

2017-10-12 CheGuevarasBeret

Dirty屬性表明用戶已與表格互動，沒有數據差異。如果以編程方式更改數據，表單仍將處於原始狀態。爲了追蹤你的'真實'狀態，你可以聽取表格的valueChanges，並檢查你的數據是否仍然相同en set the pristine – Alexander

這不是真的，如果我通過表格選項卡將保持dirty = false？是不是互動？ – CheGuevarasBeret

我想我把髒/原始的感覺與感動的狀態混淆在一起 – Alexander

我能想到的是一種駭人的方式，但它可以做你想做的。只是有一些變化的事件，我們可以匹配，如果值匹配：

<input formControlName="name" (input)="check(contact.name, name)"/>

check(val, formCtrl) { 
    val === formCtrl.value ? formCtrl.markAsPristine() : '' 
}

我們可以聽成更改，然後檢查objects match，如果是標記形式質樸：

this.contactForm.valueChanges 
    .subscribe(values => { 
    this.isEquivalent(this.contact, values) 
}); 

isEquivalent(a, b) { 
    let aProps = Object.getOwnPropertyNames(a); 
    let bProps = Object.getOwnPropertyNames(b); 

    for (var i = 0; i < aProps.length; i++) { 
    let propName = aProps[i]; 

    if (a[propName] !== b[propName]) { 
     return false; 
    } 
    } 
    this.contactForm.markAsPristine() 
}

PS，我很高興地看到，如果有人想出了更好的想法:)

來源

2017-10-14 13:16:22 Alex

與初始狀態相同的角度形式變髒

回答

相關問題