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
});
}
嗯,详细信息字段变得更容易:
详细信息-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();
}
}
详细信息-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>