Angular Reactive Forms Select Option with pre selected default not working with objects

Question

I have a select option dropdown that gets its options from the back-end via API call and set them. I want to have an option pre selected on page load, but it doesn't seem to work when I set the value to anything. I also tried to pathValue to the form control on page load, that doesn't seem to work either.

HTML

<mat-select id="depositMediaProcessingMode" formControlName="depositMediaProcessingMode"  required >
        <mat-option value="{id: 39, value: 'CASH'}" selected >CASH</mat-option>
        <mat-option  *ngFor="let option of depositMediaProcessingModes"  [value]="option">{{ option.value }}</mat-option>
      </mat-select>

TS

@Input() form: FormGroup;

  this.form.addControl('depositMediaProcessingMode', new FormControl('', [Validators.required])

    this.formService.formOptions.subscribe((options: AssetFeature[]) => {
      this.form.get('depositMediaProcessingMode').patchValue(  {id: 49, value: 'CASH'});

const depositMediaProcessingMode = options.find(option => option.featureType === 'DEPOSIT MEDIA PROCESSING MODE');
      this.depositMediaProcessingModes = (depositMediaProcessingMode ? depositMediaProcessingMode.featureValue : []);
const depositDefault = {id: 39, value: 'CASH'};

Thanks

Vasileios Kagklis · Accepted Answer · 2020-12-15 17:54:29Z

Try:

HTML

<mat-select id="depositMediaProcessingMode" formControlName="depositMediaProcessingMode">
    <mat-option *ngFor="let option of depositMediaProcessingModes" [value]="option">
    {{ option.value }}
    </mat-option>
</mat-select>

TypeScipt:

@Input() form: FormGroup;

this.form.addControl('depositMediaProcessingMode', 
    new FormControl('', [Validators.required])
);

this.formService.formOptions.subscribe((options: AssetFeature[]) => {
    const depositMediaProcessingMode = options.find(option => option.featureType === 'DEPOSIT MEDIA PROCESSING MODE');
    this.depositMediaProcessingModes = (depositMediaProcessingMode ? depositMediaProcessingMode.featureValue : []);
    const defaultOption = this.depositMediaProcessingModes.find(option => option.id === 49);
    this.form.get('depositMediaProcessingMode').setValue(defaultOption);
}

Your default option has to be one of the options rendered in your drop-down, otherwise an empty option will show up as selected.

Collectives™ on Stack Overflow

Angular Reactive Forms Select Option with pre selected default not working with objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related