我正在使用 ionic 5 和 Angular 9。我正在尝试创建一个响应式(Reactive)表单,但我收到错误“没有名称的表单控件的值访问器:‘姓氏’”。
这是我的代码:
export class ModalComponent implements OnInit {
public form: FormGroup;
constructor(private modalController: ModalController,
private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.initForm();
}
public close(): void {
// using the injected ModalController this page
// can "dismiss" itself and optionally pass back data
this.modalController.dismiss({
'dismissed': true
});
}
public initForm(): void {
this.form = this.formBuilder.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required]
});
}
logForm(){
console.log(this.form.value)
}
}
<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
<ion-item>
<ion-label>Last name</ion-label>
<ion-input type="text" formControlName="lastname"></ion-input>
</ion-item>
</form>
编辑 :
我刚刚发现了问题。我的模块中缺少导入 IonicModule。
最佳答案
如果您的组件 (ModalComponent) 是从您自己的共享模块 (MyModule) 初始化的,则必须导入 IonicModule 以便它知道如何使用 value=""属性进行渲染。
我的.module.ts:
...
import { IonicModule } from '@ionic/angular';
@NgModule({
declarations: [ModalComponent],
imports: [CommonModule],
exports: [ModalComponent, FormsModule, ReactiveFormsModule, IonicModule],
})
export class MyModule {}
我只是在处理这个问题,我花了一段时间才弄清楚 ReactiveForms 代码试图访问 <input value="">
不存在的属性,因为它仍然是未转换的 <ion-input>
元素。
关于angular - 使用 react 形式的 ionic 5 和 Angular 9 出现错误 'No value accessor for form control with name',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60814042/