Berikut adalah komponen saya di Angular 4:
@Component( {
selector: 'input-extra-field',
template: `
<div class="form-group" [formGroup]="formGroup" >
<switch [attr.title]="field.etiquette"
[attr.value]="field.valeur" [(ngModel)]="field.valeur"
[formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
</switch>
<error-messages [control]="name"></error-messages>
</div>
`
} )
Berikut adalah Kelas saya:
export class SwitchExtraField extends ExtraField {
@Input() field: ExtraFormField;
@Input() entity: { fields: Object };
@Input() formGroup: FormGroup;
constructor( formDir: NgForm ) {
super( null, null, formDir );
}
get disabled(): string {
if ( this.field && !!this.field.saisissable && !this.field.saisissable ) {
return 'disabled';
}
return null;
}
}
Ini adalah kesalahan yang saya dapatkan ketika mengkompilasi:
ERROR Error: No value accessor for form control with unspecified name attribute
at _throwError (forms.es5.js:1918)
at setUpControl (forms.es5.js:1828)
at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)
Ketika saya mengubah elemen beralih ke input, ia bekerja, mengetahui bahwa saya menggunakan struktur yang sama untuk komponen lain dan berfungsi dengan baik.
Saya memperbaiki kesalahan ini dengan menambahkan atribut nama="fieldName" ngDefaultControl
ke elemen yang membawa atribut [(ngModel)]
.
Saya memiliki masalah yang sama dan masalahnya adalah komponen anak saya memiliki @input
bernama formControl
.
Jadi saya hanya perlu mengubah dari:
<my-component [formControl]="formControl"><my-component/>
ke:
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
Ini agak bodoh, tetapi saya mendapatkan pesan kesalahan ini karena secara tidak sengaja menggunakan [formControl]
alih-alih [formGroup]
. Lihat di sini:
KELIRU
@Component({
selector: 'app-application-purpose',
template: `
<div [formControl]="formGroup">
<input formControlName="formGroupProperty" />
</div>
`
})
export class MyComponent implements OnInit {
formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
formGroupProperty: ''
})
}
}
BENAR
@Component({
selector: 'app-application-purpose',
template: `
<div [formGroup]="formGroup">
<input formControlName="formGroupProperty" />
</div>
`
})
export class MyComponent implements OnInit {
formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
formGroupProperty: ''
})
}
}