На основе количества елементов в массиве fields
генерирую такое же количество mat-select
, но как теперь например с помощью post запроса отправить все выбранные в этих mat-select
значения? Количество елементов может же менятся, как обойтись без хардкода? Спасибо.
app.component.html
<form [formGroup]="uploadForm">
<ng-container *ngFor="let field of fields">
<br />
<mat-form-field>
<mat-label>{{field.label}}</mat-label>
<mat-select [id]="field.name">
<mat-option *ngFor="let option of field.options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<br />
<button mat-button (click)="Submit()" type="submit">Submit!</button>
</form>
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
uploadForm: FormGroup;
public fields: any[];
constructor(private formBuilder: FormBuilder) {
this.uploadForm = this.formBuilder.group({
profile: ['']
});
this.fields = [
{ label: "Drill Bit Type", name: "drillBitType", options: ["Masonry", "SDS", "Universal"] },
{ label: "Drill Bit SharpAngel", name: "drillBitSharpAngel", options: ["118", "120", "135"] },
{ label: "Drill Bit Sharp Direction", name: "drillBitSharpDirection", options: ["Left", "Right"] }]
}
Submit() {
//Как передать сюда все выбранные значения из всех mat-select?
}
}
mat-select
черезViewChildren
, пройтись в цикле и собратьmatSelect.selected
, самое быстрое решение