与初始状态相同时，Angular 形成脏

Question

我正在使用 angular 创建一个简单的输入表单，如下所示。

我想知道是否有人知道我可以跟踪的方法，如果用户更改控件值然后恢复到原始值，我会称之为“真实”脏状态与否。

所以加载我的“name”属性=“John”。

然后用户删除一个字符以使 name 属性“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)"/>

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

我们可以监听表单的更改，然后检查对象是否匹配，如果是，则将表单标记为原始：

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

PS，我很高兴看到是否有人提出更好的想法:)