Question

具有一个实现ControlValueAccessor的组件，并带有内部FormGroup来维护自定义表单控件的状态。如果禁用了属于该FormGroup的任何字段，则以父形式调用.getRawValue()方法时该字段将不可见。

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

我已经检查了.getRawValue()的代码，这就是我发现的内容：

 getRawValue(): any {
    return this._reduceChildren(
        {}, (acc: {[k: string]: AbstractControl}, control: AbstractControl, name: string) => {
          acc[name] = control instanceof FormControl ? control.value : (<any>control).getRawValue();
          return acc;
        });
  }

因此，基本上，当表单控件是FormControl的实例时（是使用自定义表单控件的情况，对吗？），它会检索.value而不是.getRawValue()，这就是为什么最终形式对象中不包含已禁用的嵌套表单控件。

Stackblitz demo

复制步骤：

1）在用户界面中显示的三个自定义表单控件中的任意一个上，单击“禁用年份”按钮。

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

您知道我该如何克服吗？我也在寻找一种在父窗体中检索禁用控件的方法。

Answer 1

Kav，在自定义表单控件中，您拥有

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

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

export class DetailsFields implements ControlValueAccessor,OnInit,OnDestroy {
    ...
    onChange: (v:any) => void = () => {}; //<--define a function
    isAlive:boolean=true; //<--use to unsubscribe, see below

    registerOnChange(fn: (v: any) => void) {
      this.onChange = fn; //<--equal to function
    }

    //In ngOnInit
    ngOnInit()
    {
      this.formGroup.valueChanges.pipe(takeWhile(()=>this.isAlive))
        .subscribe(v=>{
        //return this.formGroup.getRawValue()
        this.onChange(this.formGroup.getRawValue())
      })
    }
    //In ngOnDestroy
    ngOnDestroy() {  //make isAlive=False to unsubscribe
      this.isAlive=false;
    }

但是在这种情况下，您收到的年份始终启用或未启用

还有另一个方法，它没有自定义的表单控件，而只是用于管理品牌，年份和颜色的组件。为此，首先是更改您的应用程序组件，并使用formArray与其他表单一样创建表单。

<div id="cars" [formGroup]="form">
  <div formArrayName="cars">
  <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>
  </div>
  </div>
</div>

请参见，在formArray中，我们遍历form.get（'cars'）。controls，我们需要放置一个[formGroupName] =“ i”。在组件中，只需将输入作为[formGroup] form.get（'cars'）。at（i）

当然，您需要更改函数“ createCars”以返回formGroup。不是返回对象类型{make：..，color：..，year}

的formControl

createCar(car: any) {  //return a formGroup,not a formControl
    return this.builder.group({
      make: car.make,
      color: car.color,
      year: car.year
    });
  }

好吧，细节字段变得更容易了：

details-fields.component.ts

@Component({
  selector: 'app-details-fields',
  templateUrl: './details-fields.component.html',
  styleUrls: ['./details-fields.component.css']  ,
})

export class DetailsFields {
   @Input() formGroup:FormGroup

   disableYear() {
      this.formGroup.get('year').disable();
    }

    enableYear() {
      this.formGroup.get('year').enable();
    }
}

details-fields.component.html

<div [formGroup]="formGroup">
  <div class="car-wrap">
      <div>
          <p class="title">This car is a {{formGroup.get('make').value}}</p>
      <div>
        <input type="text" formControlName="make">
        <input type="number" formControlName="year">
        <input type="text" formControlName="color">
      </div>
      <div>
        <button style="margin-top: 3px;" (click)="enableYear()">Enable year</button>
        <button style="margin-top: 3px;" (click)="disableYear()">Disable year</button>
      </div>
    </div>
  </div>
</div>

Answer 2

或者你可以简单地这样做：

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

FormGroup中禁用的控件（属于窗体自定义窗体控件的一部分）被父项中的.getRawValue（）排除

2 个答案: