How to retrieve an array of objects in two mat-select with angular 4

Question

i have an array of objects person,and each one contain an array field of objects notes

[{ "id": 0 ,name : "aa" ,notes:[ {"id":0 , "xx" : 14} ,{ "id" : 1 , "xx" : 12} ,{"id" : 1 , "zz" : 9 } ]} ,

{"id": 2 ,name : "bb" , notes:[{ "id":0 , "xx" :"7"}, { "id" : 1 , "xx" : 17 }]} , {"id": 3 , name : "cc" , notes:[ "id":0 ,"name" : "xx" : 18 ]} ]

i want to retrive the array of persons in the first mat-select and bind the select element to objects then change the second mat-select list values with notes array approriate to the object selected in the first list

<mat-form-field > <mat-select placeholder="person" [(ngModel)]="prs"[compareWith]="compareFn"> <mat-option *ngFor="let p of persons" ngDefaultControl [value]="p" > {{p.name}} </mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-select placeholder="note" [compareWith]="compareFn"> <mat-option *ngFor="let n of prs.notes" ngDefaultControl [value]="n" > {{n.xx}} </mat-option> </mat-select> </mat-form-field> — Mohamed Letaief
– Mohamed Letaief, Commented May 1, 2018 at 8:19

Eliseo · Accepted Answer · 2018-05-01 09:29:03Z

with reactiveForms and simple select

<!--is common write *ngIf="dataForm" to avoid errors at first -->
<form *ngIf="dataForm" [formGroup]="dataForm" (submit)=submit(dataForm)>
    <select formControlName="person">
      <!--is necesary using [ngValue]  -->
      <!-- notice that the value is an object -->
      <option *ngFor="let per of data" [ngValue]="per">{{per.name}}</option>
    </select>
    <select formControlName="note">
      <!--notice as the options is ngFor of "dataForm.get('person') -->
      <option *ngFor="let not of dataForm.get('person').value.notes"
                  [ngValue]="not.id">{{not.xx}}</option>
    </select>
  </form>
  {{dataForm?.value |json}}

//in component.ts

    data=[{ "id":....]

    //When you create the form, see that I put a value by defect
    this.dataForm=this.fb.group({
      person:this.data[0],
      note:this.data[0].notes[0]
    });
    //other can be
    this.dataForm=this.fb.group({
      person:{notes:[]},  //notice that create an object with property "notes"
      note:null
    });

   submit(dataForm)
   {
        //See that "dataForm.value.person" is an object, 
        //so you create a object "data" with only 
        if (dataForm.valid)
        {
            let data={
               person:dataForm.value.person.id,
               note:dataForm.value.note
            }
            //do something with "data"
            console.log(data)
        }
   }

HARIHARAN S · Accepted Answer · 2022-06-28 13:44:18Z

import { Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ReactiveFormsModule, FormGroup, FormBuilder, FormArray } from '@angular/forms';

export interface State {
  flag: string;
  name: string;
  population: string;
}

@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss']
})
export class FormsComponent {
  states: string[] = [

    "Account",
    "ADOWrapper",
    "Advantage",
    "Allocation",
    "ALTPATHS",
    "Commissions",
    "CreditNote",
    "Dashboard",
    "DATABASE",
    "DataMigration",
    "Error_Handling",
    "Export",
    "Help",
    "Import",
    "Invoice_Color",
    "Invoice_Viewer",
    "iTAR",
    "Replication",
    "Reports",
    "Settings",
    "SQL",
    "Subset",
    "Thread_Process_Request",
    "Vertex",
    "Workflow"
  ];

  formGroup!: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      units: this.formBuilder.array([
        this.getUnit()
      ])
    });
  }
  get units(): FormArray {
    return this.formGroup.get('units') as FormArray
  }

  getUnit() {
    return this.formBuilder.group({
      Euipment: [''],
      Sensors: [''],
      Phase: [''],
      Interval: ['']
    });
  }

  addUnit() {
    const control = <FormArray>this.formGroup.controls['units'];
    control.push(this.getUnit());
  }

  removeUnit(i: number) {
    const control = <FormArray>this.formGroup.controls['units'];
    if (this.units.length > 1) control.removeAt(i)
  }
  submit(value: any): void {
    console.log(value)
  }
  reset(): void {
    this.formGroup.reset();
    this.units.clear();
    this.addUnit();
  }

}

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%; 
}

.mat-grid-tile {
  width: 100% !important;

}

.mat-grid-tile-content {
  display: inherit !important;
  justify-content: space-around !important;
  align-items: flex-start !important;

}

.flex-drop {

  justify-content: space-between;
}

.grid-tile {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
  padding-top: 10px;
  margin-top: 38px;
}

.btn-remove {
  background-color: red;
  width: 50px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  color: whitesmoke;

}

.btn-add {
  background-color: green;
  width: 70px;
  height: 35px;
  border: 0;
  border-radius: 10px;
  color: whitesmoke;
  padding-right: 10px;
}

.position {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  width: 100%;
  background-color: black;
  top: 0;
  height: 50px;
}

.padd {
  padding-right: 10px;
}
.mat-select-placeholder {
  color: red !important;
}

<form [formGroup]="formGroup" (submit)="submit(formGroup.value)">
  <div class=" position">
    <div class="padd"> <button class=" btn-add" type="button" (click)="addUnit()">Add</button> </div>
    <div class="padd"> <button class=" btn-add" type="button" (click)="reset()">Reset</button></div>
  </div>
  <div formArrayName="units">
    <div *ngFor="let unit of units.controls; let i=index">
      <ng-container>
        <div [formGroupName]="i">
          <div class="grid-tile">
            <mat-form-field>
              <mat-select matInput placeholder="Equipment" formControlName="Euipment">
                <mat-option *ngFor="let option of states" [value]="option">
                  {{ option }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-select matInput placeholder="Sensors" formControlName="Sensors">
                <mat-option *ngFor="let option of states" [value]="option">
                  {{ option }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-select matInput placeholder="Phase" formControlName="Phase">
                <mat-option *ngFor="let option of states" [value]="option">
                  {{ option }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-select matInput placeholder="Interval" formControlName="Interval">
                <mat-option *ngFor="let option of states" [value]="option">
                  {{ option }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <button class="btn-remove" type="button" (click)="removeUnit(i)">X</button>
          </div>
        </div>
      </ng-container>
    </div>
    <div class="padd"> <button class=" btn-add" type="submit">submit</button>
    </div>
  </div>
</form>

Damian · Accepted Answer · 2018-05-01 08:37:44Z

0

Multiple ways of solving this. One could be:

          <mat-select placeholder="Persons" (change)="notes$.next($event.value)">
            <mat-option *ngFor="let person of persons" [value]="person.notes">
              {{ person.name }}
            </mat-option>
          </mat-select>

                      And the second one:
      <mat-select #noteField placeholder="Notes">
        <mat-option *ngFor="let note of notes$ | async" [value]="note">
          {{ note.yy }}
        </mat-option>
      </mat-select>

On component:

notes$ = new Subject<any[]>();

answered May 1, 2018 at 8:37

Damian

1086 bronze badges

1 Comment

Mohamed Letaief Over a year ago

I took advantage of your idea of setting [value]="person.notes" Thanks i solved it by removing change event and adding identifier #pn to the first mat-select then simply retrive the notes with " let note of pn.value" in the second list

Collectives™ on Stack Overflow

How to retrieve an array of objects in two mat-select with angular 4

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related