如何使用复选框将两个表单控件绑定(和取消绑定)
How to bind together (and unbind) two form-controls using a check box
我有一个包含多个字段的表单组。我也有一个复选框。选中该复选框后,我希望其中一个输入字段从另一个输入字段中获取值。如果未选中该复选框,我想让该字段独立。
我尝试使用复选框表单控件的布尔值将一个输入字段的值分配给另一个输入字段(正方形的边 = 矩形的边,如果矩形是正方形)但是 Angular 抛出一条错误消息说 "too much recursion".
在component.ts
ngOnInit() {
this.formMain = this.fb.group({
sideSquare: this.addSq.side,
lenRect: this.addRect.len,
widRect: this.addRect.wid,
isSquare: true,
});
this.onChanges();
}
onChanges(): void {
this.formMain.valueChanges.subscribe(val => this.updateValues());
}
updateValues(): void {
this.formMain.get('lenRect').setvalue(
this.formMain.get('isSquare').value ?
this.formMain.get('sideSquare').value : 0 );
this.formMain.get('widRect').setvalue(
this.formMain.get('isSquare').value ?
this.formMain.get('sideSquare').value : 0 );
}
在component.html
<form [formGroup]="formMain">
<mat-card>
<mat-card-header>
<mat-card-title>Square vs Rectangle</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Square side" type="number" formControlName="sideSquare">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rectangle length" type="number" formControlName="lenRect">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rectangle length" type="number" formControlName="widRect">
</mat-form-field>
<mat-checkbox formControlName="isSquare">Rectangle is a square</mat-checkbox>
</mat-card-content>
</mat-card>
</form>
此问题类似于送货地址与帐单地址相同的表单(但更简单)。我发现了另一个关于地址问题的问题,但建议的答案对我不起作用。
有什么办法可以做到这一点吗?感谢您的帮助!
保持简单:
form = new FormGroup({
'f1': new FormControl(''),
'f2': new FormControl(''),
'propagate': new FormControl(false),
});
ngOnInit() {
this.form.valueChanges.pipe(
filter(formValue => formValue.propagate),
map(formValue => formValue.f1),
).subscribe(f1 => this.form.get('f2').setValue(f1, { emitEvent: false }));
}
在本例中,F1为主控,F2为从控。
你监听表单值的变化:如果复选框被选中,那么你就做某事,否则你不做。
然后您将表单的值仅映射到 F1 的值。
最后,你根据F1设置了F2的值,没有发出事件(防止死循环)
我有一个包含多个字段的表单组。我也有一个复选框。选中该复选框后,我希望其中一个输入字段从另一个输入字段中获取值。如果未选中该复选框,我想让该字段独立。
我尝试使用复选框表单控件的布尔值将一个输入字段的值分配给另一个输入字段(正方形的边 = 矩形的边,如果矩形是正方形)但是 Angular 抛出一条错误消息说 "too much recursion".
在component.ts
ngOnInit() {
this.formMain = this.fb.group({
sideSquare: this.addSq.side,
lenRect: this.addRect.len,
widRect: this.addRect.wid,
isSquare: true,
});
this.onChanges();
}
onChanges(): void {
this.formMain.valueChanges.subscribe(val => this.updateValues());
}
updateValues(): void {
this.formMain.get('lenRect').setvalue(
this.formMain.get('isSquare').value ?
this.formMain.get('sideSquare').value : 0 );
this.formMain.get('widRect').setvalue(
this.formMain.get('isSquare').value ?
this.formMain.get('sideSquare').value : 0 );
}
在component.html
<form [formGroup]="formMain">
<mat-card>
<mat-card-header>
<mat-card-title>Square vs Rectangle</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Square side" type="number" formControlName="sideSquare">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rectangle length" type="number" formControlName="lenRect">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rectangle length" type="number" formControlName="widRect">
</mat-form-field>
<mat-checkbox formControlName="isSquare">Rectangle is a square</mat-checkbox>
</mat-card-content>
</mat-card>
</form>
此问题类似于送货地址与帐单地址相同的表单(但更简单)。我发现了另一个关于地址问题的问题,但建议的答案对我不起作用。
有什么办法可以做到这一点吗?感谢您的帮助!
保持简单:
form = new FormGroup({
'f1': new FormControl(''),
'f2': new FormControl(''),
'propagate': new FormControl(false),
});
ngOnInit() {
this.form.valueChanges.pipe(
filter(formValue => formValue.propagate),
map(formValue => formValue.f1),
).subscribe(f1 => this.form.get('f2').setValue(f1, { emitEvent: false }));
}
在本例中,F1为主控,F2为从控。
你监听表单值的变化:如果复选框被选中,那么你就做某事,否则你不做。
然后您将表单的值仅映射到 F1 的值。
最后,你根据F1设置了F2的值,没有发出事件(防止死循环)