Angular - Unable to add form control to field to FormGroup

I am trying to add a FormControl that is used as an autocomplete field to a FormGroup, but I am not able to do it.

ts file:

export class EditChannelFieldsComponent implements OnInit {
field_name = new FormControl(); // FormControl I want to add
form: FormGroup; // this is the FormGroup where all the other fields live

ngOnInit() {
this.initializeFormAndItsFields();
}


initializeFormAndItsFields() {
this.form = new FormGroup({
// field_name: new FormControl(null, { // fix: unclear how to move this here
// validators: [Validators.required]
// }),
field_value: new FormControl(null, {
validators: [Validators.required]
}),
description: new FormControl(null, {
validators: [Validators.required]
}),
group_name: new FormControl(null, {
validators: [Validators.required]
}),
group_value: new FormControl(null, {
validators: [Validators.required]
}),
});
}


onSaveChannelFields() {
console.log('emitting data')
const formData = {
//field_name: this.field_name.value.field_name, //fix: this works but i dont like the way its working right now.
field_name: this.form.value.field_name, //fix: does not work
field_value: this.form.value.field_value,
description: this.form.value.description,
group_name: this.form.value.group_name,
group_value: this.form.value.group
};
console.log('formData',formData);
// this.onSubmitReason.emit(formData);
// this.form.reset();
}



}


HTML file:

<form [formGroup]="form" (submit)="onSaveChannelFields()" *ngIf="!isLoading">

<mat-form-field>
<input type="text" matInput [formControl]="field_name" [matAutocomplete]="auto" placeholder="Field name">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
field_name: {{option.field_name}}
field_value: {{option.field_value}}
description: {{option.description}}
group_name: {{option.group_name}}
group_value: {{option.group_value}}


</mat-option>
</mat-autocomplete>
</mat-form-field>

<div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">
<mat-form-field>
<input matInput type="text" formControlName="field_value" [(readonly)]="isFieldChannelMatch"
placeholder="Field value">
<mat-error *ngIf="form.get('field_value').invalid">Please enter field value.</mat-error>
</mat-form-field>

</div>


<div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">

<mat-form-field>
<input matInput type="text" formControlName="description" [(readonly)]="isFieldChannelMatch"
placeholder="Description">
<mat-error *ngIf="form.get('field_value').invalid">Please enter the fields description.</mat-error>
</mat-form-field>
</div>
<div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">

<mat-form-field>
<input matInput type="text" formControlName="group_name" [(readonly)]="isFieldChannelMatch"
placeholder="Group name">
<mat-error *ngIf="form.get('group_name').invalid">Please enter group name.</mat-error>
</mat-form-field>
</div>

<div [class]="isFieldChannelMatch ? 'selected' : 'not-selected'">

<mat-form-field>
<input matInput type="text" formControlName="group_value" [(readonly)]="isFieldChannelMatch"
placeholder="Group values">
<mat-error *ngIf="form.get('group_value').invalid">Please enter group value.</mat-error>
</mat-form-field>
</div>




<button mat-raised-button color="accent" type="submit">{{saveButtonText}}</button>
</form>


I tried to add the form control to the group, but it didn't work and I'm not sure why it's not working.

If I uncomment the code in the function initializeFormAndItsFields, all the form values print as undefined when the function onSaveChannelFields is called.

I didn't see any other Stack Overflow questions that were related to this.

Any help is welcome.

Continue reading...