0

我正在使用 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字段，但该字段属于父表单。

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

我想知道有什么方法可以定义特定的属于特定的（在这种情况下是父表单）表单组？

4

1 回答 1

2

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

表单模型应该反映在 HTML 中。

编辑：无论如何，如果你想这样做，你总是可以直接绑定表单控件 - 只是为了那个控件 - 而不是使用表单组/名称使用[formControl]and FormGroup#get。或多或少会像

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

如果您没有参考顶级表单组，您可以使用https://angular.io/api/forms/AbstractControl#parent来遍历它。

于 2019-03-20T10:43:02.650 回答