Angular 6 for Enterprise-Ready Web Applications

Form groups

Our form has many input fields, so we will use a FormGroup, created by this.formBuilder.group to house our various FormControl objects. Additionally, children FormGroup objects will allow us to maintain the correct shape of the data structure.

Start building the buildUserForm function, as follows:

src/app/user/profile/profile.component.ts...  buildUserForm(user?: IUser) {    this.userForm = this.formBuilder.group({      email: [        {          value: (user && user.email) || '',          disabled: this.currentUserRole !== this.Role.Manager,        },        EmailValidation,      ],      name: this.formBuilder.group({        first: [(user && user.name.first) || '', RequiredTextValidation],        middle: [(user && user.name.middle) || '', OneCharValidation], last: [(user && user.name.last) || '', ...