![](/img/trans.png)
[英]Angular 7 - No value accessor for form control with unspecified name attribute
[英]Angular 7 Reactive forms “No value accessor for form control with unspecified name attribute”
我正在使用反應式表單,我似乎遇到了看似隨機的表單字段的問題。 關於為什么會發生這種情況的任何想法都是有代價的。
如果有幫助,我剛剛開始使用 angular 和 material 7
有趣的是,在表單中添加和刪除元素會導致其他元素出現問題。
ERROR 錯誤:沒有未指定名稱屬性的表單控件的值訪問器
TS
export class VolunteerApplicationPersonalStepComponent implements OnInit
{
public readonly form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
businessTelephoneExt: [''],
otherTelephone: [''],
otherTelephoneExt: [''],
});
}
}
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>
正如有人建議的 .. formControlName="businessTelephoneExt"
應用程序電話代碼(注意它曾經有 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()
我看到的一件小事是:
<app-telephone-input i18n-placeholder placeholder="Other Telephone"
[formControl]="form.get('otherTelephone')">
</app-telephone-input>
所以應該是:
<app-telephone-input i18n-placeholder placeholder="Other Telephone"
[appFormControl]="form.get('otherTelephone')">
</app-telephone-input>
如果要創建自定義表單控制器,則應實現 ControlValueAccessor 接口
ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
...
}
如果僅實現 ControlValueAccessor 接口,則可以綁定屬性 formControl
從父組件中刪除 otherTelephone 表單控件並從子組件中添加 otherTelephone
export class VolunteerApplicationPersonalStepComponent implements OnInit
{
public readonly form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
businessTelephoneExt: [''],
otherTelephoneExt: [''],
});
}
}
使用 controlContainer 為子組件提供父窗體實例,然后注入 FormGroupDiretive 以獲取父窗體實例
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
<mat-form-field>
<input
matInput
type="tel"
[required]="required"
[placeholder]="placeholder"
formControl="otherTelephone">
@ricardo 的回答不正確
使用 ControlValueAccessor 接口時,您可以使用名為 formControl 的 @Input(),很可能您還沒有向提供程序添加 NG_VALUE_ACCESSOR 令牌。 就像是:
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.