Issue with displaying selected value and options in Mat-select when using formarray - Reactive forms in Angular

Question

Issue with displaying selected value and options in Mat-select when using formarray - Reactive forms in Angular

I've been working on the code below to create dropdowns, but I'm having trouble getting the selected value and options to show up in the dropdowns. Can you help me figure out what's wrong with the code?

Component code

testForm: FormGroup;
get ctrls() {
  return this.testForm.get('ctrls') as FormArray;
}
data = [{
    initial: 'hen',
    options: ['hen', 'duck', 'parrot']
  },
  {
    initial: 'lion',
    options: ['lion', 'tiger', 'cheetah']
  }
];

constructor(private router: Router, private formBuilder: FormBuilder) {
  this.testForm = this.formBuilder.group({
    ctrls: this.formBuilder.array([])
  });
  for (let i = 0; i < this.data.length; i++) {
    this.ctrls.push(this.formBuilder.control(this.data[i]));
  }
}

Template code

<form [formGroup]="testForm">
  <div formArrayName="ctrls" *ngFor="let animals of ctrls.controls; let i = index">
    <mat-form-field>
      <mat-select [formControlName]="i" [(value)]="animals.value.initial">
        <mat-select-trigger>{{ animals.value.initial }}</mat-select-trigger>
        <mat-option *ngFor="let animal of animals.value.options" [value]="animal">{{ animal }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

I would appreciate any guidance on how to fix this issue...

Please click here to visit the stackblitz link and see the problem for yourself.

javascript angular typescript angular-reactive-forms angular-forms

Answer 1

Answer №1

Instead of relying on the controller options, utilize the options from the data itself.

Make sure to initialize your formControl using this.data[i].initial, as the data is a string and not an object. I made some changes to the HTML by using the controller instead of controllerName since you already have access to it. Additionally, I removed the [value]-attribute in the mat-select because the value is being set in the component. Using [value] is more suitable for template-driven forms rather than reactive forms, and combining both may cause unintended consequences.

HTML:

<form [formGroup]="testForm">
  <div *ngFor="let animals of ctrls.controls; let i = index">
    <mat-form-field>
      <mat-select [formControl]="animals">
        <mat-option *ngFor="let animal of data[i].options" [value]="animal">{{ animal }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

And in the TypeScript file:

ngOnInit() {
 this.testForm = this.formBuilder.group( {
   ctrls : this.formBuilder.array( [] )
 });
 for( let i = 0; i < this.data.length; i++ ) {
   this.ctrls.push( this.formBuilder.control( this.data[ i ].initial ) );
 }
}

https://stackblitz.com/edit/angular-material-design-q3wbah

EDIT:

Based on the feedback about wanting an object as the data in the formControl, consider modifying the data structure as shown below.

  data = [ 
    { options : [
      {name:'hen', icon: 'someIcon'},
      {name:'duck', icon: 'asd'},
      {name: 'parrot', icon: 'asdasd'} ] }
  ];

If you need to set the correct initial object, match the name with your initial object to ensure you get the right reference. In the example below, I've only selected the first element.

You can then use the <mat-select-trigger> as initially intended.

https://stackblitz.com/edit/angular-material-design-new-data

Answer 2

Instead of relying on the controller options, utilize the options from the data itself.

Make sure to initialize your formControl using this.data[i].initial, as the data is a string and not an object. I made some changes to the HTML by using the controller instead of controllerName since you already have access to it. Additionally, I removed the [value]-attribute in the mat-select because the value is being set in the component. Using [value] is more suitable for template-driven forms rather than reactive forms, and combining both may cause unintended consequences.

HTML:

<form [formGroup]="testForm">
  <div *ngFor="let animals of ctrls.controls; let i = index">
    <mat-form-field>
      <mat-select [formControl]="animals">
        <mat-option *ngFor="let animal of data[i].options" [value]="animal">{{ animal }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

And in the TypeScript file:

ngOnInit() {
 this.testForm = this.formBuilder.group( {
   ctrls : this.formBuilder.array( [] )
 });
 for( let i = 0; i < this.data.length; i++ ) {
   this.ctrls.push( this.formBuilder.control( this.data[ i ].initial ) );
 }
}

https://stackblitz.com/edit/angular-material-design-q3wbah

EDIT:

Based on the feedback about wanting an object as the data in the formControl, consider modifying the data structure as shown below.

  data = [ 
    { options : [
      {name:'hen', icon: 'someIcon'},
      {name:'duck', icon: 'asd'},
      {name: 'parrot', icon: 'asdasd'} ] }
  ];

If you need to set the correct initial object, match the name with your initial object to ensure you get the right reference. In the example below, I've only selected the first element.

You can then use the <mat-select-trigger> as initially intended.

https://stackblitz.com/edit/angular-material-design-new-data

Answer 3

Answer №2

There seems to be a typo in your code

animmal

In addition, it is recommended to move the code from the constructor to the ngOnInit method

Take a look at: https://stackblitz.com/edit/angular-material-design-m491ic?file=src%2Fapp%2Fapp.component.ts

Furthermore, it appears that there is confusion with the formControls. I have made some adjustments to the logic, hoping it will be helpful.

Essentially, the options should be outside of the formcontrol

<mat-form-field>
  <mat-select
  [formControl]="animals"
  >
    <mat-option 
      *ngFor="let animal of data[i].options; let j = index"
      value="{{animal}}"
    >{{ animal }}</mat-option>
  </mat-select>
</mat-form-field>

I also made changes to the formgroup definition

this.testForm = this.formBuilder.group( {
      ctrls : this.formBuilder.array( [] )
    } );
    for( let i = 0; i < this.data.length; i++ ) {
      this.ctrls.push( new FormControl({value: this.data[i].initial, disabled: false}) );
    }

Answer 4

There seems to be a typo in your code

animmal

In addition, it is recommended to move the code from the constructor to the ngOnInit method

Take a look at: https://stackblitz.com/edit/angular-material-design-m491ic?file=src%2Fapp%2Fapp.component.ts

Furthermore, it appears that there is confusion with the formControls. I have made some adjustments to the logic, hoping it will be helpful.

Essentially, the options should be outside of the formcontrol

<mat-form-field>
  <mat-select
  [formControl]="animals"
  >
    <mat-option 
      *ngFor="let animal of data[i].options; let j = index"
      value="{{animal}}"
    >{{ animal }}</mat-option>
  </mat-select>
</mat-form-field>

I also made changes to the formgroup definition

this.testForm = this.formBuilder.group( {
      ctrls : this.formBuilder.array( [] )
    } );
    for( let i = 0; i < this.data.length; i++ ) {
      this.ctrls.push( new FormControl({value: this.data[i].initial, disabled: false}) );
    }

Issue with displaying selected value and options in Mat-select when using formarray - Reactive forms in Angular

Answer №1

Answer №2

Similar questions

Nesting / Mulled / JS - Uploading Files - Form's end is unexpectedly reached

Mapping Form Fields (with Formik)

Transforming BufferGeometry to Geometry using FBXLoader within the Three.js library

Is there a way to unshackle myself from the promise chain in Express and trigger an error ahead of time

Services that are not configured as singleton instances

Return true for cucumber datatable in typescript without fail

Error: The property 'ss' cannot be accessed because it is undefined

What is the best way to design a Global Navigation menu for websites?

The functionality for transferring ERC20 claim tokens seems to be malfunctioning

Use two queries to apply filters to entries in NextJS

Multiple change events triggered in AJAX interactions

Enhancing ajax content with Rx.Observable.fromEvent: A step-by-step guide

Tips on retrieving a value nested within 3 layers in Angular

Issue with Displaying Local Server Image in Angular 2 HTML

The RxJS Map operator may struggle to detect changes in an array that has been

The input field does not adhere to the maximum length property

What is the best way to store JSON encoded items in an array using square brackets?

Encountering an error when attempting to parse a JSON Object in Java from an AJAX call

JavaScript Code: Empty a text box when a different one is active

Utilizing node.js for manipulating files (JSON) through reading and writing operations