Angular mat-select default value varsayılan değer atama, seçili getirme

  1. aceleecele
    1
    55
    8.07.2020 15:02:00

    Angular mat-select de, herhangi bir elemanı seçili nasıl getirebilirim, sayfa yüklenince ?

    angular typescript 1 ay önce 153 Görüntüleme

( 1 ) Cevap

  1. koraydrk
    1
    2629
    8.07.2020 17:00:00

    aşağıda bir mat-select componentinde, bir meyvenin seçili olarak gelmesinin örneği var, en altta çalışan uygulama örneği linki mevcut

    typescript tarafı:

    import { Component , ViewChild} from '@angular/core';
    import { FormBuilder, FormGroup,FormControl,Validators } from '@angular/forms';
    
    /**
     * @title Basic table
     */
    @Component({
      selector: 'table-basic-example',
      styleUrls: ['table-basic-example.css'],
      templateUrl: 'table-basic-example.html',
    })
    export class TableBasicExample {
      frmMeyveler: FormGroup;
    
      meyveler=[{
        id:1,
        name:'Elma'
      },{
        id:2,
        name:'Armut'
      },{
        id:3,
        name:'Kiraz'
      }]
    
      constructor(private fb: FormBuilder){}
    
      ngOnInit() {
    
        this.frmMeyveler = this.fb.group({
          meyveMatSelect: [null, Validators.required]
        });
    
        const toSelect = this.meyveler.find(c => c.id == 3);
          this.frmMeyveler.get('meyveMatSelect').setValue(toSelect);
      }
    }
    

    html tarafı:

    <form [formGroup]="frmMeyveler">
    <mat-form-field class="full-width">
      <mat-select placeholder="Meyveler" formControlName="meyveMatSelect">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let category of meyveler" [value]="category">
          {{category.name}} - {{category.description}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    
    <p>{{frmMeyveler.get('meyveMatSelect').value | json}}</p>
    </form>
    

    Örneği buradan inceleyebilirsiniz

    https://stackblitz.com/edit/how-to-set-default-value-of-mat-select-when-options-are-5axtba?file=app%2Ftable-basic-example.ts

Cevabınız