Search⌘ K
AI Features
Home
Courses
Angular: Designing and Architecting Web Applications

Wiring the Form

Understand how to connect form controls to a reactive form group, bind inputs to controls, and manage form submission events. Learn to disable the submit button when the form is invalid and prevent page refresh on submission.

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.

TypeScript 3.3.4
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 lesson. We’re just trying to get ...