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
Angular mat-select default value varsayılan değer atama, seçili getirme
Angular mat-select de, herhangi bir elemanı seçili nasıl getirebilirim, sayfa yüklenince ?
Yorum Ekleyin