Angular 与初始状态相同时形成脏
Angular forms dirty when same as initial state
我正在使用 angular 创建一个简单的输入表单,如下所示。
我想知道是否有人知道我可以跟踪的方法,我称之为 "true" 如果用户更改控件值然后恢复为原始状态,是否为脏状态。
所以在加载我的 "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() {
}
}
我能想到的也许是一种骇人听闻的方式,但它可以满足您的需求。如果值匹配,我们可以匹配一些更改事件:
<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,我很高兴看到有人提出更好的想法:)
我正在使用 angular 创建一个简单的输入表单,如下所示。
我想知道是否有人知道我可以跟踪的方法,我称之为 "true" 如果用户更改控件值然后恢复为原始状态,是否为脏状态。
所以在加载我的 "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() {
}
}
我能想到的也许是一种骇人听闻的方式,但它可以满足您的需求。如果值匹配,我们可以匹配一些更改事件:
<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,我很高兴看到有人提出更好的想法:)