如何以角电抗形式创建计算场？

Question

我已经在我的应用程序中创建了一个表单。

  mapForm = this.fb.group({
    name: ['', Validators.required],
    view: this.fb.group({
      width: ['', Validators.required],
      height: ['', Validators.required]
    })
  });

以这种形式，我正在创建如下的JSON：

  {
    name: "x", 
    view:{ 
        width: "100%", 
        height: "100%" 
    } 
  }

所以我的表格是：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" required>
  </label>

   <div formGroupName="view">
    <h3>View</h3>

        <label>
          width:
          <input type="text" formControlName="width">
        </label>

        <label>
          height:
          <input type="text" formControlName="height">
        </label>
    </div>
 </form>

但是我想将视图的宽度/高度值（100）和单位（％）属性分开两个输入元素，并将它们加入json。

    <label>
      width:
      <input type="text" formControlName="height" value="100">
    </label>
    <label>
      unit:
      <input type="text" formControlName="unit" value="%">
    </label>

但是我的view.width将为“ 100％”。我该怎么办？

Answer 1

我只能想象您可以创建额外的表单控件字段，然后在要加入的表单控件上使用.valueChanges和combineLatest()，并在订阅中更新这些更新的表单控件的值。反应形式中没有这样的功能。但是，除非您真的有理由立即进行合并，否则最好在检索表单值以将其发送到某个地方时将它们合并。

Answer 2

为什么不提交？