Angular 5分组输入与select

Question

我有一个Reactive表单，左侧是组选择，右侧是输入类型编号，我希望得到一个结合这两个的值。

例如

dynamicForms.html

<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form">

    <div fxLayout="row" fxLayoutGap="10px" *ngSwitchCase="'number'">

        <mat-form-field *ngIf="prop.units !== [];" fxFlex="80px">
          <mat-select placeholder="Unit" (change)="form.value.frequencies.unit = 'KHz';">
            <mat-option *ngFor="let unit of prop.units" [value]="unit">
              {{ unit }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field *ngSwitchCase="'number'" fxFlex="100" class="full_width">
          <input 
            type="number" 
            matInput 
            [formControlName]="prop.key"
            [placeholder]="prop.key" 
            [id]="prop.key"
            [min]="prop.min"
            [max]="prop.max"
            value="{{prop.value}}">
          <mat-icon *ngIf="prop.description" class="inp_description" matTooltip="{{prop.description}}" matTooltipShowDelay="500" matSuffix>help</mat-icon>
        </mat-form-field>

      </div>


</form>



   <p>
       <button mat-raised-button [disabled]="form.invalid" type="submit">Save</button>
   </p>

我得到的是：

frequencies: 58

我想提交的是这个值。

    frequencies: {
       value: 58,
       unit: 'KHz'
    }

我尝试了我在Anguar中所知道的每一个技巧，但没有想到的是工作

Answer 1

您可以通过以下方式创建组控件：

this.entryForm = new FormGroup({
  'frequencies': new FormGroup({
    'value': new FormControl(),
    'unit': new FormControl()
  })
})

在你的html表单中添加一个div来对这些控件进行分组，并在字段中更改formControlName的路径。

<form [formGroup]="entryForm">
  <div formGroupName="frequencies">
    <input type="number" formControlName="value" />
    <select formControlName="unit">
      <option value="khz">Khz</option>
    </select>
  </div>
</form>