初期状態と同じとき角張った形が汚い

Question

角度を使用して以下のような簡単な入力フォームを作成しています。

ユーザーがコントロールの値を変更して元の状態に戻した場合、私が何を呼び出すか、「真」の汚れているかどうかを知っている人がいるかどうかは疑問だ。

私の "name"プロパティ= "John"の読み込み時。

次に、ユーザーが名前プロパティ「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() { 

    } 
} 

Answer 1

私が考えることができるのはおそらくハッキリですが、あなたが望むものはそうです。

<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は、私は誰かがより良いアイデアを思い付くかどうかを確認するためにうれしいです:)