For managing forms in my Angular 5 project, I have implemented Reactive Form. Within the form, I integrated ng2-select2 to create a dropdown. However, when attempting to bind formControlName to the <select2></select2> directive, an error is thrown:
ERROR Error: No value accessor for form control with name: 'citizenship_id'
Below is the code snippet from my ngOnInit function in the .ts file:
ngOnInit() {
this.jobId = this.route.snapshot.queryParams.jobId;
this.detailForm = new FormGroup({
date_of_birth: new FormControl(null, Validators.required),
gender: new FormControl('', Validators.required),
marital_status: new FormControl('', Validators.required),
npwp_family_status_id: new FormControl('', Validators.required),
citizenship_id: new FormControl('', Validators.required),
});
// Additional code for ajaxOptions and options...
}
And here is the corresponding code from my .html file:
<select2 [options]="options" formControlName="citizenship_id"></select2>