angular - disable 方法不适用于响应式表单
问题描述
我试图通过一个条件禁用复选框,但它没有被禁用。
我强行在 oninit 中插入了该方法,并在console.log()
表单中进行了检查,status: "DISABLE"
但该复选框没有被禁用,如果我在复选框中插入禁用的数据绑定,角度会抱怨,说我正在使用反应式表单并且我需要使用该.disabled()
方法。
合同表格组件
@Component({
selector: 'app-contract-form',
template: `
<app-form [class]="'flex__display align__items__center bg__color__red__light'" [fmGroup]="contractForm">
<app-input
(onclick)="onSubmitForm()"
[class]="'cursor__pointer height__rem__2 width__rem__2 margin__xy__2'"
[fmGroup]="contractForm"
[fmControlName]="'termsAndConditions'"
[type]="'checkbox'"
[checked]="formValue"
>
</app-input>
<app-span>
Declaro que conheço e concordo com as
<app-span
(onclick)="clauseDocumentClick.emit(true)"
[class]="'cursor__pointer text__color__blue__dark text__decoration__underline'"
>
Cláusulas Gerais do Contrato.
</app-span>
</app-span>
</app-form>
`,
})
export class ContractFormComponent implements OnInit {
contractForm!: FormGroup;
@Output() submitForm = new EventEmitter<boolean>();
@Output() clauseDocumentClick = new EventEmitter<boolean>();
@Input() protected set setDisabledForm(isDisabled: boolean) {
this.contractForm.controls.termsAndConditions[isDisabled ? 'disable' : 'enable']();
}
constructor(protected readonly formBuilder: FormBuilder) {
this.contractForm = formBuilder.group({
termsAndConditions: formBuilder.control(true, Validators.requiredTrue)
});
}
ngOnInit() {
this.contractForm.disable()
console.log(this.contractForm)
}
get formValue(): boolean {
return this.contractForm.controls.termsAndConditions.value;
}
onSubmitForm(): void {
this.contractForm.controls.termsAndConditions.patchValue(!this.formValue);
this.submitForm.emit(this.formValue);
}
}
表单组件
@Component({
selector: 'app-form',
template: `
<form [formGroup]="fmGroup" [class]="class" [autocomplete]="autocomplete" novalidate>
<ng-content></ng-content>
</form>
`
})
export class FormComponent implements OnInit {
@Input() fmGroup!: FormGroup;
@Input() autocomplete = 'on';
@Input() colectionText: string;
ngOnInit() {}
}
输入组件
@Component({
selector: 'app-input',
template: `
<input
(click)="onclick.emit($event)"
[formControlName]="fmControlName"
[class]="class"
[type]="type"
[placeholder]="placeholder"
[autocomplete]="autocomplete"
[minLength]="minlength"
[maxLength]="maxlength"
[readonly]="readonly"
[autofocus]="autofocus"
[checked]="checked"
[required]="required"
>
`,
})
export class InputComponent implements OnInit {
@Output() onclick = new EventEmitter<MouseEvent>();
@Input() fmControlName!: FormControlName;
@Input() class = '';
@Input() type = 'text';
@Input() placeholder = '';
@Input() autocomplete = 'on';
@Input() minlength = 1;
@Input() maxlength = 524288;
@Input() readonly = false;
@Input() autofocus = false;
@Input() checked = false;
@Input() required = true;
constructor() {}
ngOnInit() {}
}
解决方案
当您在 中禁用整个表单时ngOnInit()
,它应该禁用表单内的所有控件,包括复选框。
检查 stackblitz - https://stackblitz.com/edit/angular-reactive-forms
如果要根据某些条件禁用特定控件(例如复选框),则可以使用this.contractForm.get('termsAndConditions').disable()
推荐阅读
- javascript - 返回函数时的Javascript内存使用情况
- c# - 当我从 C# App 向 Laravel 发送 post 请求时,为什么 $request 为空?
- php - 如何通过表单通过 POST 传递 TD id
- delphi - 帕斯卡中的素数计算
- contains - 包含无法找到 VbTab 和 Chr
- python - 如何将 Python 字节对象直接存储到 MySql 数据库中而无需使用额外的字节?
- sql - SQL Pivot - 垂直到水平的查询结果
- sql - concat_ws 基于 SQL 查询中列的值的字符串
- javascript - 在单击摩纳哥编辑器时显示替换面板
- python - 使用 Panda Data Reader 更改数据框中的标签标题