Привязать значения к массиву в объекте из элементов управления Angular 6

Question

Я использую приведенный ниже класс сущностей,

  public class Details
    {
        public Test()
        {
            this.Languages = new List<Language>();
        }

        public string Id { get; set; }
        public string Name { get; set; }
        public List<Language> Languages { get; set; }

    }

HTML,

<mat-form-field class="example-full-width">
          <input matInput placeholder="Name" formControlName="Name">
          <mat-hint align="end">Not more then 50 characters long.</mat-hint>
        </mat-form-field>
 <mat-form-field class="example-full-width">
        <mat-label>Mother Language</mat-label>
        <mat-select formControlName="motherTongueId" required>
          <mat-option *ngFor="let selected of languageList" [value]="selected.id">
            {{selected.name}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="hasError('motherTongueId', 'required')">Mother Language is required</mat-error>
      </mat-form-field>
      <mat-form-field class="example-full-width">
        <mat-label>Other Language 1</mat-label>
        <mat-select formControlName="languageKnown1Id" >
          <mat-option *ngFor="let selected of languageList" [value]="selected.id">
            {{selected.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field class="example-full-width">
        <mat-label>Other Language 2</mat-label>
        <mat-select formControlName="languageKnown2Id" >
          <mat-option *ngFor="let selected of languageList" [value]="selected.id">
            {{selected.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>

Component.ts

 submitForm(formValue: Details) {
    console.log(formValue);
}

Я могу получить значение индивидуальноиз всех элементов управления, но есть ли способ автоматически привязать значения языка (3 элемента управления) к объекту списка в классе, чтобы я мог передать объект для сохранения.Также для повторного связывания данных в элементы управления во время редактирования.

Любой более простой способ?

Answer 1

Поскольку вы используете подход ReactiveForms для привязки данных, вам необходимо использовать FormGroup, чтобы вы автоматически получали обновленные данные в обоих местах вашего HTML-файла, а также в файле Components.ts.

Чтобы получить данные в файле component.ts, вы можете использовать их как

this.userForm.getRawValue()

Если вы хотите получить данные в html, вам нужно использовать их как:

 <span>{{userForm.getRawValue() | json}}</span>

STACKBLITZ