TypeScript is an open-source as well as a free programming language that builds on JavaScript with added syntax. It is used for creating and managing large-scale JavaScript projects. Programmers use it to create a robust component as it offers interfaces, classes, and modules. TypeScript coding has become more straightforward with the frameworks it offers. Angular is a well-known framework used for web applications. It allows for making single-page client-based applications. When working with Angular, you get the error warning “no value accessor for form control with unspecified name attribute”.
Let’s check out how the error appears.
How do you get the error?
When you are using an element to switch components, you get an error warning. You get the following error after compiling the script
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)The Angular component you used:
@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>
`
} )The class you used:
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;
}
}That’s how you get the error message. Check out how to fix it
How To Fix the Error “no value accessor for form control with unspecified name attribute”
Solution 1 – Switch [formControl] to [formGroup]
To fix the error, you need to do a minor change. You just need to switch [formControl] to [formGroup].
Avoid this wrong way:
@Component({
selector: 'app-application-purpose',
template: `
<div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE -->
<input formControlName="formGroupProperty" />
</div>
`
})
export class MyComponent implements OnInit {
formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
formGroupProperty: ''
})
}
}This is the right approach after replacing the code:
@Component({
selector: 'app-application-purpose',
template: `
<div [formGroup]="formGroup"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE -->
<input formControlName="formGroupProperty" />
</div>
`
})
export class MyComponent implements OnInit {
formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
formGroupProperty: ''
})
}
}It is an effective way to tackle the error warning.
Solution 2 – Add ngDefaultControl
Another way to resolve the error is to add ngDefaultControl. You need to add this to your code.
Code that shows the error
<button (click)="Addcity(city.name)" [(ngModel)]="city.name" class="dropdown-item fontstyle"
*ngFor="let city of Cities; let i = index">
{{city.name}}
</button>Now add ngDefaultControl, it looks like this:
<button (click)="Addcity(city.name)" [(ngModel)]="city.name" ngDefaultControl class="dropdown-item fontstyle"
*ngFor="let city of Cities; let i = index">
{{city.name}}
</button>It makes the error go away.
Solution 3 – Change a code
You have formControl as an @input in your code. To handle the error, you need to change it.
You need to change this:
<my-component [formControl]="formControl"><my-component/>To this:
<my-component [control]="control"><my-component/>Your ts looks like this:
@Input()
control:FormControl;Conclusion
We shed light on the solutions to fix the error “no value accessor for form control with unspecified name attribute”. You can try any of the solutions to resolve the error.
I hope you find it helpful! I wish you luck!