从控件 Angular 6 将值绑定到 object 中的数组

Question

我正在使用以下实体 class，

  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>

组件.ts

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

我可以从所有控件中单独获取值，但是有什么方法可以将语言值（3 个控件）自动绑定到 class 中的列表 object 以便我可以通过 object 进行保存。 还可以在编辑期间将数据重新绑定到控件中。

有更简单的方法吗？

Answer 1

当您使用ReactiveForms方法进行数据绑定时，您需要使用FormGroup ，以便在 Html 以及 Components.ts 文件中的两个位置自动获取更新的数据。

要获取 component.ts 文件中的数据，您可以像这样使用它

this.userForm.getRawValue()

如果您想获取 html 中的数据，那么您需要像这样使用它：

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

堆栈闪电战