Angular: Designing and Architecting Web Applications/

...

/

Wiring the Form

Wiring the Form

We'll add form controls for the other inputs and make adjustments to the form.

We'll cover the following...

We’ve got a reusable input component. It’s time to hook up the rest of the form.

Form controls

The first thing we’ll do is add some form controls. We can add them to the configuration object of the form group we created in the app.component.ts component class file.

Press + to interact
export class AppComponent {
  ccForm = new FormGroup({
    name: new FormControl('', [
      Validators.required,
      Validators.minLength(3)
    ]),
    num: new FormControl(''),
    expiration: new FormControl(''),
    cvv: new FormControl('')
  });
}

We’re adding the form controls to the ccForm form group. We aren’t going to assign default values to them. They’ll all be set to an initial value of an empty string. As for validation, we’ll work on that in another ...