时间戳

首页 > 解决方案 > Angular 5 中的嵌套表单

angular - Angular 5 中的嵌套表单

问题描述

我正在尝试创建可能具有嵌套表单的组件。我嵌套它们是因为我想在多个阶段进行验证，即使我只会保存一次。也许我的问题还有另一种解决方案，但现在我的代码看起来有点像这样：

<form (submit)="save()" #form1="ngForm">
    <form (submit)="accept()" #form2="ngForm">
        <!-- #form2 fields -->
        <button id="submit2" type="submit" />
    </form>
    <!-- #form1 fields -->
    <button id="submit1" type="submit" />
</form>

当我单击#submit2按钮时，它会提交我的#form1表单，这是我没想到的。这怎么可能解决？

更新：

我发现我可以在按钮的属性中指定表单：

<button id="submit1" type="submit" form="form1" />

这完全符合我的预期。

标签： angularweb

解决方案

以您的方式嵌套表单并不是一个理想的方案。有更好的方法来实现这一点。其中之一是使用反应形式。让我们从一个例子开始。

我的自定义地址.component.ts

@Component({
 selector: 'my-custom-address'
 template: `
  <label>Street</label>
  <input type="text" [formControl]="group.controls.street" />

  <label>City</label>
  <input type="text" [formControl]="form.controls.city" /> 
 `
})
export class MyCustomAddressComponent {
 @Input() group: FormGroup;
}

我们有一个自定义组件来保存表单的嵌套部分。该组件接收我们使用 Angular 提供的 FormBuilder 构建的表单的一部分。

app.component.ts

@Component({
 selector: 'app-component'
 template: `
   <form (submit)="save()">
   <label>First name</label>
   <input type="text" [formControl]="form.controls.firstName" />

   <label>Last name</label>
   <input type="text" [formControl]="form.controls.lastName" />

   <my-custom-address [group]="form.controls.address"></my-custom-address> 
  </form>
 `
})
export class AppComponent {
  form: FormGroup = this.fb.group({
   firstName: [null],
   lastName: [null],
   address: this.fb.group(
    {
      street: [null, [Validators.required]],
      city: [null]
    },
    {
     validators: [CUSTOM_GROUP_VALIDATOR]
    } 
   )
  });

 constructor(private fb: FormBuilder) {}
}

应用程序组件包含我们完整的表单配置。如果您仔细观察，您会发现我们表单的地址控件有一个嵌套结构，其中包含街道和城市。这种方法的有趣之处在于，您可以将自定义验证器分配给一组这些控件（请参阅 CUSTOM_GROUP_VALIDATOR）。通过这种方式，您可以决定验证应该如何工作并在它发生时进行控制。

如果您要检查整个表单是否有效，您可以使用this.form.valid它返回一个布尔值。

由于这个示例可能会让人不知所措，因此请务必查看 Angular 关于反应式表单和自定义表单验证器的文档。使用文档和我的示例，您应该被引导到正确的方向;)。

反应形式：https ://angular.io/guide/reactive-forms

自定义表单验证器：https ://angular.io/guide/form-validation#cross-field-validation

推荐阅读