Angular 5中的嵌套表单

Question

I'm trying to create components which may have nested forms. I'm nesting them because I'd like validation at multiple stages, even though I'll save only once. Maybe there's another solution to my problem, but right now my code looks a bit like this:

<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>

When I click #submit2 button, it submits my #form1 form, which I did not expect. How could this be solved?

UPDATE:

I found out that I can specify the form in the button's attributes:

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

This works exactly like I expected it.

Answer 1

Nesting forms the way you do is not an ideal scenario. There are better ways to achieve this. One of these is using Reactive Forms. Let's start with an example.

my-custom-address.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;
}

We have a custom component that holds the nested part of our form. The component receives a part of the form that we built using the FormBuilder provided by Angular.

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) {}
}

The app components holds our complete form configuration. If you look closely you can that the address control of our form has a nested structure which holds both the street and city. The interesting thing about this approach is that you can assign custom validators to a group of those controls (see CUSTOM_GROUP_VALIDATOR). This way you can decide how the validation should work and kinda controls when it happens.

If you were to check if the form as a whole is valid you can use this.form.valid which returns a boolean.

As this example can be quit overwhelming make sure to check out the documentation of Angular about Reactive Forms and custom form validators. Using the documentation and my example you should be guided into the right direction ;).

Reactive Forms: https://angular.io/guide/reactive-forms

Custom Form Validators: https://angular.io/guide/form-validation#cross-field-validation