Here’s a concrete example:

In app.module.ts, ReactiveFormsModule:

Import {ReactiveFormsModule} from ‘@angular/forms’;

And the imports field added to the @NgModule:

(2) Import the FormBuilder from the Component HTML that needs to display the form:

Import {FormBuilder} from ‘@angular/forms’;

In the CartComponent, create a new checkoutForm that stores the form model returned by the Group method of the formBuilder:

(3) In the order submission stage, users need to manually enter their name and address.

Define an event handler onSubmit to clear all Cart data:

The next step is to draw the form and its internal elements in the Cart Component view:

<form [formGroup] ="checkoutForm" (ngSubmit) ="onSubmit(checkoutForm.value)">
  <div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="address">
      Address
    </label>
    <input id="address" type="text" formControlName="address">
  </div>
  <button class="button" type="submit">Purchase</button>

</form>
Copy the code

The final cart View looks like this:

Output after clicking the Purchase button:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: