Angular 表单问题:AbstractControl 与 FormControl
Issue with Angular Forms : AbstractControl vs FormControl
当我尝试使用带有控件的表单时出现此错误。
Type 'AbstractControl' is missing the following properties from type
'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState
表单代码
this.checkoutForm = this.fb.group({
firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
lastName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
address: ['', [Validators.required, Validators.maxLength(100)]],
pinCode: ['', Validators.required]
});
html
<input type="text"
name="firstName"
[formControl]="checkoutForm.controls['firstName']"
value=""
placeholder=""
autocomplete="off"
>
当您创建响应式表单时,您应该使用表单本身,而不是它的控件。
如果您只是单独使用控件,那么拥有表单有什么意义?
<form [formGroup]="checkoutForm">
<input type="text" formControlName="firstName">
</form>
这对我有用。即 $any()
<ion-checkbox
[formControl]="$any(fc)"
(ionChange)="changeCheckbox()"
>
当我尝试使用带有控件的表单时出现此错误。
Type 'AbstractControl' is missing the following properties from type
'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState
表单代码
this.checkoutForm = this.fb.group({
firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
lastName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
address: ['', [Validators.required, Validators.maxLength(100)]],
pinCode: ['', Validators.required]
});
html
<input type="text"
name="firstName"
[formControl]="checkoutForm.controls['firstName']"
value=""
placeholder=""
autocomplete="off"
>
当您创建响应式表单时,您应该使用表单本身,而不是它的控件。
如果您只是单独使用控件,那么拥有表单有什么意义?
<form [formGroup]="checkoutForm">
<input type="text" formControlName="firstName">
</form>
这对我有用。即 $any()
<ion-checkbox
[formControl]="$any(fc)"
(ionChange)="changeCheckbox()"
>