angular 更新表单值的两种方法： setvalue,patchvalue
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了angular 更新表单值的两种方法： setvalue,patchvalue，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5820字，纯文字阅读大概需要9分钟。
内容图文
使用 patchValue() 方法会比使用 setValue() 方法更好！
1、patchValue()
//
angular2/packages/forms/src/model.ts
export class FormGroup extends AbstractControl {
...
patchValue(
value: {[key: string]: any},{onlySelf, emitEvent}:
{onlySelf?: boolean, emitEvent?: boolean} = {}): void {
Object.keys(value).forEach(name => {
if (this.controls[name]) {
this.controls[name].patchValue(value[name], {onlySelf: true, emitEvent});
}
});
this.updateValueAndValidity({onlySelf, emitEvent});
}
}
// 使用示例
const form = new FormGroup({
first: new FormControl(),
last: new FormControl()
});
console.log(form.value); // {first: null, last: null}
form.patchValue({first: ‘Nancy‘});
console.log(form.value); // {first: ‘Nancy‘, last: null}
从源码中我们可以看出，patchValue() 方法会获取输入参数对象的所有 key 值，然后循环调用内部控件的 patchValue() 方法，具体代码如下：
Object.keys(value).forEach(name => { if (this.controls[name]) { this.controls[name].patchValue(value[name], {onlySelf: true, emitEvent}); } });
首先，Object.keys() 会返回对象 key 值的数组，例如：
const man = {name : ‘Semlinker‘, age: 30};
Object.keys(man); // [‘name‘, ‘age‘]此外 this.controls 包含了 FormGroup 对象中的所有 FormControl 控件，我们可以通过 this.controls[name] 方式，访问到 name 对应的控件对象。
现在让我们来回顾一下创建 FormGroup 对象的相关代码
this.form = this.fb.group({
name: [‘‘, Validators.required],
event: this.fb.group({
title: [‘‘, Validators.required],
location: [‘‘, Validators.required]
})
});
与之相对应的对象模型如下：
{
name: ‘‘,
event: {
title: ‘‘,
location: ‘‘
}
}
因此要更新该模型的值，我们可以利用 FormGroup 对象的 patchValue() 方法：
this
.form.patchValue({
name: ‘Semlinker‘,
event: {
title: ‘Angular 4.x\‘s Road‘,
location: ‘Xiamen‘
}
});
以上代码将会通过循环的方式，更新每个 FormControl 控件。接下来我们看一下 FormControl 中 patchValue() 方法的具体实现：
patchValue(value: any, options: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
} = {}): void {
this.setValue(value, options);
}
patchValue() 方法有什么好处呢？假设我们使用 firebase，那么当我们从 API 接口获取数据对象时，对象内部可能会包含 $exists 和 $key 属性。而当我们直接使用返回的数据对象作为参数，直接调用 patchValue() 方法时，不会抛出任何异常：
this
.form.patchValue({
$exists:
function
() {},
$key: ‘-KWihhw-f1kw-ULPG1ei‘,
name: ‘Semlinker‘,
event: {
title: ‘Angular 4.x\‘s Road‘,
location: ‘Xiamen‘
}
});
其实没有抛出异常的原因，是因为在 patchValue() 内部循环时，我们有使用 if 语句进行条件判断。
2、setValue
FormGroup 类中的 setValue() 方法的具体实现：
setValue(
value: {[key: string]: any},
{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
this._checkAllValuesPresent(value);
Object.keys(value).forEach(name => {
this._throwIfControlMissing(name);
this.controls[name].setValue(value[name], {onlySelf: true, emitEvent});
});
this.updateValueAndValidity({onlySelf, emitEvent});
}
// 使用示例
const form = new FormGroup({
first: new FormControl(),
last: new FormControl()
});
console.log(form.value); // {first: null, last: null}
form.setValue({first: ‘Nancy‘, last: ‘Drew‘});
console.log(form.value); // {first: ‘Nancy‘, last: ‘Drew‘}
Object.keys() 的循环，但在循环开始之前，我们会先调用 _checkAllValuesPresent() 方法，对输入值进行校验。 另外 _checkAllValuesPresent() 方法的具体实现如下：_checkAllValuesPresent(value: any): void { this._forEachChild((control: AbstractControl, name: string) => { if (value[name] === undefined) { thrownew Error(`Must supply a value for form control with name: ‘${name}‘.`); } }); }
该方法内部通过 _forEachChild() 遍历内部的 FormControl 控件，来确保我们在调用 setValue() 方法时，设置的参数对象中，会包含所有控件的配置信息。如果 name 对应的配置信息不存在，则会抛出异常。
在 _checkAllValuesPresent() 验证通过后，Angular 会进入 Object.keys() 循环，此外在调用 setValue() 方法前，还会优先调用 _throwIfControlMissing() 判断控件是否存在，该方法的实现如下：
_throwIfControlMissing(name: string): void { if (!Object.keys(this.controls).length) { thrownew Error(` There are no form controls registered withthis group yet. If you‘re using ngModel, you may want to check next tick (e.g. use setTimeout). `); } if (!this.controls[name]) { throw new Error(`Cannot find form control with name: ${name}.`); } }
this.controls 是否存在，如果存在进一步判断 name 对应的 FormControl 控件是否存在。当 _throwIfControlMissing() 验证通过后，才会最终调用 FormControl 控件的 setValue() 方法：
this.controls[name].setValue(value[name], {onlySelf: true, emitEvent})
我们来看一下 FormControl 类中，setValue() 方法的具体实现：
setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange,
emitViewToModelChange}: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
} = {}): void {
this._value = value;
if (this._onChange.length && emitModelToViewChange !== false) {
this._onChange.forEach((changeFn) =>
changeFn(this._value, emitViewToModelChange !== false));
}
this.updateValueAndValidity({onlySelf, emitEvent});
}
该方法的第一个参数，就是我们要设置的值，第二个参数是一个对象：
- onlySelf：若该值为 true，当控件的值发生变化后，只会影响当前控件的验证状态，而不会影响到它的父组件。默认值是 false。
- emitEvent：若该值为 true，当控件的值发生变化后，将会触发
valueChanges事件。默认值是 true - emitModelToViewChange：若该值为 true，当控件的值发生变化时，将会把新值通过
onChange事件通知视图层。若未指定emitModelToViewChange的值，这是默认的行为。 - emitViewToModelChange：若该值为 true，
ngModelChange事件将会被触发，用于更新模型。若未指定emitViewToModelChange的值，这是默认的行为。
其实仅仅通过上面的代码，我们还是没完全搞清楚 setValue() 方法内部真正执行流程。如我们不知道如何注册 changeFn 函数和 updateValueAndValidity() 方法的内部处理逻辑，接下来我们先来看一下如何注册 changeFn 函数
export class FormControl extends AbstractControl {
/*
* @internal
*/
_onChange: Function[] = [];
...
/**
* Register a listener for change events.
*/
registerOnChange(fn: Function): void { this._onChange.push(fn); }
}
现在我们来回顾一下 setValue() 的相关知识点。对于 FormGroup 对象，我们可以通过 setValue() 方法更新表单的值，具体使用示例如下：
this
.form.setValue({
name: ‘Semlinker‘,
event: {
title: ‘Angular 4.x\‘s Road‘,
location: ‘Xiamen‘
}
});
以上代码成功运行后，我们就能成功更新表单的值。但如果我们使用下面的方式，就会抛出异常：
this
.form.setValue({
$exists:
function
() {},
$key: ‘-KWihhw-f1kw-ULPG1ei‘,
name: ‘Semlinker‘,
event: {
title: ‘Angular 4.x\‘s Road‘,
location: ‘Xiamen‘
}
});
总结：patchValue 可以只更新副本的数据，而setValue则必须与form 数据结构一致才能进行更新。
原文：https://www.cnblogs.com/isylar/p/13163133.html
内容总结
以上是互联网集市为您收集整理的angular 更新表单值的两种方法： setvalue,patchvalue全部内容，希望文章能够帮你解决angular 更新表单值的两种方法： setvalue,patchvalue所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。