I am trying to add a FormControl that is used as a 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 that didnt work, so not really sure why its not working

If i uncomment the code in the function initializeFormAndItsFields, all the forms values print as undefined when the function onSaveChannelFields is called

I didnt see any other stackoverflow questions that were related to this. any help is welcomed

CodePudding user response：

In this line:

<input type="text" matInput [formControl]="field_name" [matAutocomplete]="auto" placeholder="Field name">

You are referring to the field_name FormControl (variable) but not the field_name FormControl in the form FormGroup.

Just change the [formControl] attribute to formControlName attribute same as what you have done for the rest of FormControl.

<input type="text" matInput formControlName="field_name" [matAutocomplete]="auto" placeholder="Field name">

Demo @ StackBlitz

Note: The readonly attribute doesn't support two-way binding, you have to apply [readonly] (one-way binding) instead of [(readonly)] (two-way binding).