[英]Angular 7 Reactive forms “No value accessor for form control with unspecified name attribute”
I am using reactive forms and i seem to be having issues with what would seem random form fields.我正在使用反应式表单,我似乎遇到了看似随机的表单字段的问题。 Any ideas as to why this is happening is apriciated.
关于为什么会发生这种情况的任何想法都是有代价的。
I have just started using angular and material 7 if that helps如果有帮助,我刚刚开始使用 angular 和 material 7
Interestingly enough adding and removing elements in the form causes issues with other elements.有趣的是,在表单中添加和删除元素会导致其他元素出现问题。
ERROR Error: No value accessor for form control with unspecified name attribute
ERROR 错误:没有未指定名称属性的表单控件的值访问器
TS TS
export class VolunteerApplicationPersonalStepComponent implements OnInit
{
public readonly form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
businessTelephoneExt: [''],
otherTelephone: [''],
otherTelephoneExt: [''],
});
}
}
HTML HTML
<form [formGroup]="form">
<mat-form-field>
<input matInput i18n-placeholder placeholder="Business Extension"
[formControl]="form.get('businessTelephoneExt')">
</mat-form-field>
<app-telephone-input i18n-placeholder placeholder="Other Telephone"
[formControl]="form.get('otherTelephone')">
</app-telephone-input>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Other Extension"
[formControl]="form.get('otherTelephoneExt')">
</mat-form-field>
<br>
<div class="group-margin group-min-width">
<button mat-stroked-button color="primary" matStepperPrevious i18n>Previous</button>
<button mat-raised-button color="primary" matStepperNext (click)="next()" i18n>Next</button>
</div>
</form>
as someone suggested .. formControlName="businessTelephoneExt"正如有人建议的 .. formControlName="businessTelephoneExt"
App-Telephone Code (Note it used to have formControl NOT appFormControl)应用程序电话代码(注意它曾经有 formControl 而不是 appFormControl)
export class TelephoneInputComponent implements OnInit {
@Input() public required = false;
@Input() public placeholder = '';
@Input() public appFormControl: NgControl;
constructor() {
}
public ngOnInit() {
}
}
<mat-form-field>
<input
matInput
type="tel"
[required]="required"
[placeholder]="placeholder"
[formControl]="appFormControl">
<mat-hint i18n>Please enter digits only</mat-hint>
<mat-error
*ngIf="appFormControl.hasError('phone')"
i18n>Invalid phone (requires 10 digits)
</mat-error>
</mat-form-field>
似乎你不能有一个名为 formControl 的 @Input()
One little thing I see is this:我看到的一件小事是:
<app-telephone-input i18n-placeholder placeholder="Other Telephone"
[formControl]="form.get('otherTelephone')">
</app-telephone-input>
So it should be:所以应该是:
<app-telephone-input i18n-placeholder placeholder="Other Telephone"
[appFormControl]="form.get('otherTelephone')">
</app-telephone-input>
If you want to create a custom form controler you should implement ControlValueAccessor interface如果要创建自定义表单控制器,则应实现 ControlValueAccessor 接口
ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
...
}
If you implement ControlValueAccessor interface only you can bind property formControl如果仅实现 ControlValueAccessor 接口,则可以绑定属性 formControl
Remove otherTelephone formcontrol from parent component and add otherTelephone from child component从父组件中删除 otherTelephone 表单控件并从子组件中添加 otherTelephone
export class VolunteerApplicationPersonalStepComponent implements OnInit
{
public readonly form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
businessTelephoneExt: [''],
otherTelephoneExt: [''],
});
}
}
Using controlContainer to provide parent form instance to child component then inject FormGroupDiretive to get parent form instance使用 controlContainer 为子组件提供父窗体实例,然后注入 FormGroupDiretive 以获取父窗体实例
apptelephoneinput.component.html apptelephoneinput.component.html
@Component({
selector: 'app-telephone-input',
templateUrl: './app-telephone-input.component.html',
styleUrls: ['./app-telephone-input.component.css'],
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective
}]
})
export class TelephoneInputComponent implements OnInit {
@Input() public required = false;
@Input() public placeholder = '';
childForm;
constructor(private parentF: FormGroupDirective) { }
ngOnInit() {
this.childForm = this.parentF.form;
this.childForm.addControl('otherTelephone', new FormControl(''))
}
}
app-telephone-input.component.html app-telephone-input.component.html
<mat-form-field>
<input
matInput
type="tel"
[required]="required"
[placeholder]="placeholder"
formControl="otherTelephone">
Sample example: https://stackblitz.com/edit/angular-fktkdk示例示例: https : //stackblitz.com/edit/angular-fktkdk
@ricardo's answer is not correct @ricardo 的回答不正确
You can have a @Input() named formControl when using the ControlValueAccessor interface, it is likely you have not added a NG_VALUE_ACCESSOR token to your providers.使用 ControlValueAccessor 接口时,您可以使用名为 formControl 的 @Input(),很可能您还没有向提供程序添加 NG_VALUE_ACCESSOR 令牌。 Something like:
就像是:
export const VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyComponent),
multi: true,
};
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.scss'],
providers: [VALUE_ACCESSOR]
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.