angular 更新表单值的两种方法： setvalue,patchvalue

杨柳高舞楼心月 發表於 2020-6-19 15:01:00

angular 更新表单值的两种方法： setvalue,patchvalue

使用 patchValue() 方法会比使用 setValue() 方法更好！
 
1、patchValue()
<div class="cnblogs_code">
<pre>// angular2/packages/forms/src/model.ts
export class FormGroup extends AbstractControl {
...
patchValue(
value: {: any},{onlySelf, emitEvent}:
 {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
 Object.keys(value).forEach(name => {
 if (this.controls) {
 this.controls.patchValue(value, {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}</pre>
</div>
从源码中我们可以看出，patchValue() 方法会获取输入参数对象的所有 key 值，然后循环调用内部控件的 <code>patchValue()</code> 方法，具体代码如下：
<div class="cnblogs_code">
<pre>Object.keys(value).forEach(name => {
if (this.controls) {
this.controls.patchValue(value, {onlySelf: true, emitEvent});
}
});</pre>
</div>
首先，<code>Object.keys()</code> 会返回对象 key 值的数组，例如：
<div class="cnblogs_code">
<pre>const man = {name : 'Semlinker', age: 30};
Object.keys(man); // ['name', 'age']此外 <code style="font-style: italic; background-color: rgba(255, 255, 255, 1); font-size: 14px">this.controls</code> 包含了 FormGroup 对象中的所有 FormControl 控件，我们可以通过 <code style="font-style: italic; background-color: rgba(255, 255, 255, 1); font-size: 14px">this.controls</code> 方式，访问到 name 对应的控件对象。</pre>
</div>
<div>
现在让我们来回顾一下创建 FormGroup 对象的相关代码
<div class="cnblogs_code">
<pre>this.form = this.fb.group({
name: ['', Validators.required],
event: this.fb.group({
title: ['', Validators.required],
location: ['', Validators.required]
})
});</pre>
</div>
与之相对应的对象模型如下：
<div class="cnblogs_code">
<pre>{
name: '',
event: {
title: '',
location: ''
}
}</pre>
</div>
因此要更新该模型的值，我们可以利用 <code>FormGroup</code> 对象的 <code>patchValue()</code> 方法：
<div class="cnblogs_code">
<pre>this.form.patchValue({
name: 'Semlinker',
event: {
title: 'Angular 4.x\'s Road',
location: 'Xiamen'
}
});</pre>
</div>
以上代码将会通过循环的方式，更新每个 <code>FormControl</code> 控件。接下来我们看一下 <code>FormControl</code> 中 patchValue() 方法的具体实现：
<div class="cnblogs_code">
<pre>patchValue(value: any, options: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
} = {}): void {
this.setValue(value, options);
}</pre>
</div>
<div>
<div>忽略所有的函数参数和类型，它所做的就是调用 setValue() 方法，设置控件的值。另外使用 <code>patchValue()</code> 方法有什么好处呢？假设我们使用 <code>firebase</code>，那么当我们从 API 接口获取数据对象时，对象内部可能会包含 <code>$exists</code> 和 <code>$key</code> 属性。而当我们直接使用返回的数据对象作为参数，直接调用 patchValue() 方法时，不会抛出任何异常：</div>
<div class="cnblogs_code">
<pre>this.form.patchValue({
$exists: function () {},
$key: '-KWihhw-f1kw-ULPG1ei',
name: 'Semlinker',
event: {
title: 'Angular 4.x\'s Road',
location: 'Xiamen'
}
});</pre>
</div>
其实没有抛出异常的原因，是因为在 patchValue() 内部循环时，我们有使用 <code>if</code> 语句进行条件判断。
 
2、setValue FormGroup 类中的 setValue() 方法的具体实现：</div>
</div>
<div class="cnblogs_code">
<pre>setValue(
value: {: any},
{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
 this._checkAllValuesPresent(value);
 Object.keys(value).forEach(name => {
 this._throwIfControlMissing(name);
 this.controls.setValue(value, {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'}</pre>
</div>
<div>
<div>跟 patchValue() 方法一样，我们内部也是包含一个 <code>Object.keys()</code> 的循环，但在循环开始之前，我们会先调用 <code>_checkAllValuesPresent()</code> 方法，对输入值进行校验。另外 <code>_checkAllValuesPresent()</code> 方法的具体实现如下：</div>
<div class="cnblogs_code">
<pre>_checkAllValuesPresent(value: any): void {
this._forEachChild((control: AbstractControl, name: string) => {
 if (value === undefined) {
 throw new Error(`Must supply a value for form control with name: '${name}'.`);
 }
});
}</pre>
</div>
<div>
<div>
该方法内部通过 <code>_forEachChild()</code> 遍历内部的 FormControl 控件，来确保我们在调用 <code>setValue()</code> 方法时，设置的参数对象中，会包含所有控件的配置信息。如果 <code>name</code> 对应的配置信息不存在，则会抛出异常。
在 <code>_checkAllValuesPresent()</code> 验证通过后，Angular 会进入 <code>Object.keys()</code> 循环，此外在调用 <code>setValue()</code> 方法前，还会优先调用 <code>_throwIfControlMissing()</code> 判断控件是否存在，该方法的实现如下：
</div>
<div class="cnblogs_code">
<pre>_throwIfControlMissing(name: string): void {
if (!Object.keys(this.controls).length) {
 throw new Error(`
 There are no form controls registered with this group yet.
 If you're using ngModel,
 you may want to check next tick (e.g. use setTimeout).
 `);
}
if (!this.controls) {
 throw new Error(`Cannot find form control with name: ${name}.`);
}
}</pre>
</div>
<div>
<div>上面代码首先判断 <code>this.controls</code> 是否存在，如果存在进一步判断 <code>name</code> 对应的 <code>FormControl</code> 控件是否存在。当 <code>_throwIfControlMissing()</code> 验证通过后，才会最终调用 <code>FormControl</code> 控件的 setValue() 方法：</div>
<div class="cnblogs_code">
<pre>this.controls.setValue(value, {onlySelf: true, emitEvent})</pre>
</div>
我们来看一下 <code>FormControl</code> 类中，setValue() 方法的具体实现：
<div class="cnblogs_code">
<pre>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});
}</pre>
</div>
<div>
<div>
该方法的第一个参数，就是我们要设置的值，第二个参数是一个对象：
<ul>
<li>onlySelf：若该值为 true，当控件的值发生变化后，只会影响当前控件的验证状态，而不会影响到它的父组件。默认值是 false。</li>
<li>emitEvent：若该值为 true，当控件的值发生变化后，将会触发 <code>valueChanges</code> 事件。默认值是 true</li>
<li>emitModelToViewChange：若该值为 true，当控件的值发生变化时，将会把新值通过 <code>onChange</code> 事件通知视图层。若未指定 <code>emitModelToViewChange</code> 的值，这是默认的行为。</li>
<li>emitViewToModelChange：若该值为 true，<code>ngModelChange</code> 事件将会被触发，用于更新模型。若未指定 <code>emitViewToModelChange</code> 的值，这是默认的行为。</li>
</ul>
其实仅仅通过上面的代码，我们还是没完全搞清楚 <code>setValue()</code> 方法内部真正执行流程。如我们不知道如何注册 changeFn 函数和 <code>updateValueAndValidity()</code> 方法的内部处理逻辑，接下来我们先来看一下如何注册 changeFn 函数
</div>
<div class="cnblogs_code">
<pre>export class FormControl extends AbstractControl {
/** @internal */
_onChange: Function[] = [];
...
/**
* Register a listener for change events.
*/
registerOnChange(fn: Function): void { this._onChange.push(fn); }
}</pre>
</div>
现在我们来回顾一下 setValue() 的相关知识点。对于 <code>FormGroup</code> 对象，我们可以通过 <code>setValue()</code> 方法更新表单的值，具体使用示例如下：
<div class="cnblogs_code">
<pre>this.form.setValue({
name: 'Semlinker',
event: {
title: 'Angular 4.x\'s Road',
location: 'Xiamen'
}
});</pre>
</div>
以上代码成功运行后，我们就能成功更新表单的值。但如果我们使用下面的方式，就会抛出异常：
<div class="cnblogs_code">
<pre>this.form.setValue({
$exists: function () {},
$key: '-KWihhw-f1kw-ULPG1ei',
name: 'Semlinker',
event: {
title: 'Angular 4.x\'s Road',
location: 'Xiamen'
}
});</pre>
</div>
 
总结：patchValue 可以只更新副本的数据，而setValue则必须与form 数据结构一致才能进行更新。 </div>
</div>
</div>
</div>
<div> </div>
<div> </div>
  
来源：https://www.cnblogs.com/isylar/p/13163133.html

頁: [1]

琼殿技术论坛's Archiver

angular 更新表单值的两种方法： setvalue,patchvalue