Using latest form functionality

Ionic Framework ionic-v3
7

I found the chapter “Forms in Angular 2” from the ‘ngBook’ very helpful. The following code worked.

<form [formGroup]="clientForm" (ngSubmit)="onSubmit(clientForm.value)">
   <ion-item [class.error]="!client_name.valid && client_name.touched">
      <ion-label floating class="required-label">Given name(s)</ion-label>
      <ion-input type="text" formControlName="client_name"></ion-input>
   </ion-item>
...
</form>

import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
@Component({
    templateUrl: 'build/pages/client-details/client-details.html',
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})
export class ClientDetailsPage {
   clientForm: FormGroup;
   client_title: AbstractControl;
   .... // repeat for other controls

   constructor(private fb: FormBuilder, ...){
      this.clientForm = this.fb.group({
         client_name: ['', Validators.compose([Validators.required, Validators.minLength(2)])],
         ... // repeat for other controls
      });
      this.client_name = this.clientForm.controls['client_name'];
      ... // repeat for other controls
   }
}

The Validation works now …

1 Like