mat-select and get values | Angular Community | Page 1

ancient ocean Apr 20, 2023, 11:44 AM

#

        <mat-form-field appearance="fill">
          <mat-label>Équipe</mat-label>
          <mat-select formControlName="equipe">
 
              <mat-option *ngFor="let data of dataForSelects['equipes']" [value]="data">
                {{data.label}}
              </mat-option>

          </mat-select>
          <mat-error *ngIf="checkErrorForm('equipe', 'required')">L'équipe est obligatoire</mat-error>
        </mat-form-field>
...

form = this._formBuilder.group({
    id:         [''],
    equipe:     ['', [Validators.required,  ],  ],
...

with :

this.form.valueChanges.subscribe((values: any) => {
  console.log(values);   // The values of the MAT-SELECT are missing

Why is this.form.value missing values from all drop-down lists?
Other text field or date values are well recovered

How do I do this?

humble anchor Apr 20, 2023, 12:46 PM

#

Can't reproduce: https://stackblitz.com/edit/angular-pejxth?file=src%2Fapp%2Fselect-form-example.html,src%2Fapp%2Fselect-form-example.ts. As always, post a complete minimal repro on Stackblitz.

ancient ocean Apr 20, 2023, 1:00 PM

#

ooh thanks i try on stackblitz

ancient ocean Apr 20, 2023, 1:56 PM

#

https://stackblitz.com/edit/angular-material-select-with-form-control-ig1yhv?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

humble anchor Apr 20, 2023, 2:10 PM

#

Open the console of your browser, and read the error message. It says:

ERROR Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).

#

formControlName is used to say: this input is bound to the control named '...', that you'll find inside the parent form group (or form array)

#mat-select and get values