来自 FormGroup 的禁用控件(表单自定义表单控件的一部分)被父级中的 .getRawValue() 排除

问题描述

有一个实现ControlValueAccessor的组件，带有内部FormGroup来维护自定义表单控件的状态.当任何字段，即 FormGroup 的一部分被禁用时，在父表单中调用 .getRawValue() 方法时该字段不可见.

根据规范，.getRawValue() 应该返回原始对象，包括禁用的字段.

我检查了 .getRawValue() 的代码，这是我发现的:

 getRawValue(): 任何 {返回 this._reduceChildren({}, (acc: {[k: string]: AbstractControl}, control: AbstractControl, name: string) =>{acc[name] = FormControl 的控件实例?control.value : (<any>control).getRawValue();返回acc；});}

所以，基本上，当表单控件是 FormControl 的实例时(使用自定义表单控件时就是这种情况，对吗?)，它检索 .value 而不是 >.getRawValue() 这就是为什么嵌套表单的禁用控件不包含在最终对象中.

Stackblitz 演示

重现步骤:

1) 在 UI 中显示的三个自定义表单控件中的任何一个上单击禁用年份"按钮.

2) 检查下面的输出 => .getRawValue() 和 .value 响应是相同的.

你知道我如何克服这个问题吗?我正在寻找一种方法来检索父表单中禁用的控件.

解决方案

Kav，在你的自定义表单控件中

 registerOnChange(fn: (v: any) => void) {this.formGroup.valueChanges.subscribe(fn);}

因此，您的组件返回 formGroup 的值".由于控件被禁用，该值不会返回此字段.您可以更改您的 customControl 以返回 formGroup 的 rawValue，为此您需要创建一个 onChangeFunction，并在 ngOnInit 中订阅更改并发送 rawValues.当我们订阅时，最好使用 takeWhile 和变量取消订阅

export class DetailsFields 实现 ControlValueAccessor,OnInit,OnDestroy {...onChange: (v:any) =>void = () =>{};//<--定义一个函数isAlive:boolean=true;//<--用于取消订阅，见下文registerOnChange(fn: (v: any) => void) {this.onChange = fn;//<--等于函数}//在ngOnInit中ngOnInit(){this.formGroup.valueChanges.pipe(takeWhile(()=>this.isAlive)).subscribe(v=>{//返回 this.formGroup.getRawValue()this.onChange(this.formGroup.getRawValue())})}//在 ngOnDestroyngOnDestroy() {//使 isAlive=False 取消订阅this.isAlive=false;}

但在这种情况下，您收到的年份总是启用与否

还有另一种方法，即没有自定义表单控件，只是一个管理品牌、年份和颜色的组件.为此，首先是更改您的应用程序组件并像使用 formArray 一样创建另一个表单.

<div formArrayName="汽车"><div *ngFor="let car of form.get('cars').controls; let i = index;"[formGroupName]="i"><app-details-fields [formGroup]="form.get('cars').at(i)" ></app-details-fields>