Question

我在DTO中使用反应式表单。在这种情况下，我们有一些复杂的嵌套结构。

因此，当我们设计html时，在一个部分中，一种形式的某些字段，而另一种形式的某些字段。

例如。

this.myForm = fb.group({
    'access_code':['', Validators.required],
    'patinet': fb.group({
        'fullname': ['', Validators.required],
        'gender': [],
        'address': fb.group({
            'street': [''],
            'houseNumber': [''],
            'postalCode': ['']
        })
    })
});

<form [formGroup]="myForm">
  <div class="form-group">
    <label for="fullname">Order</label>
    <input type="text" id="order" formControlName="order" class="form-control">
  </div>       
  <div formGroupName="patient">
    <div class="form-group">
      <label for="street">Fullname</label>
      <input type="text" id="fullname" value="street" formControlName="fullname" class="form-control">
    </div>
    <div class="form-group">
        <label for="street">AccessCode</label>
        <input type="text" id="access_code" value="access_code" formControlName="access_code" class="form-control">
      </div>
    <div formGroupName="address">
      <div class="form-group">
        <label for="street">street</label>
        <input type="text" id="street" value="street" formControlName="street" class="form-control">
      </div>
      <div class="form-group">
        <label for="houseNumber">houseNumber</label>
        <input type="text" id="houseNumber" value="houseNumber" formControlName="houseNumber" class="form-control">
      </div>
      <div class="form-group">
        <label for="postalCode">postalCode</label>
        <input type="text" id="postalCode" value="postalCode" formControlName="postalCode" class="form-control">
      </div>
    </div>
  </div>
</form>

您可以看到我在患者表格部分中有 access_code 字段，但是该字段属于父表格。

我有这样一种结构，其中设计的一个部分包含来自不同表单组的字段。

我想知道有什么方法可以定义特定于属于特定（在这种情况下为父形式）形式组吗？

Answer 1

那么，表单模型与HTML标记具有不同结构的原因是什么？如果这是因为DTO，那么您的方法是错误的。表单模型不必反映DTO模型（就像通常在模型驱动的表单中那样），因为您将能够在后期处理中在表单模型和DTO之间进行映射。我认为，这是它存在的主要原因-将表格与数据模型分离。

表单模型应以HTML反映。

编辑：无论如何，如果您要这样做，则始终可以直接绑定表单控件（仅用于该控件），而不是使用[formControl]和FormGroup#get来使用表单组/名称。或多或少会是

<input [formControl]=this.myForm.get('access_key;');/>

如果您没有引用顶级表单组，则可以使用https://angular.io/api/forms/AbstractControl#parent进行遍历。

如何以嵌套反应形式从组内部的控件访问父级

1 个答案: