Form Example

snippet.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

codigo:any;


this.codigo = formBuilder.group({
        dniProfesional: ['',Validators.compose([Validators.maxLength(11),Validators.minLength(8),Validators.pattern(/()\d/g),Validators.required])],
        apellidoProfesional: ['',Validators.compose([Validators.maxLength(15),Validators.minLength(1),Validators.pattern(/()\w/g),Validators.required])]
});

<form [formGroup]="codigo" method="post" class="form-signin" id="myform" name="codigo">
            <ion-item>
                <ion-label stacked>Codigo Atomatico</ion-label>
                <ion-input type="number" placeholder="y ella" formControlName="dniProfesional" name="dniProfesional" id="dniProfesional" [class.errorClubHonorarios]="!codigo.controls.dniProfesional.valid &&  submitAttempt"></ion-input>
            </ion-item>
            <p style="color:red;"  class="help-block text-danger errorClubHonorarios errorP" *ngIf="!codigo.controls.dniProfesional.valid  && submitAttempt">Ingrese DNI o CUIT del profesional</p>
            <ion-item>
                <ion-label stacked>N° de Cupon</ion-label>
                <ion-input placeholder="y ella" formControlName="apellidoProfesional" type="text" class="form-control" name="apellidoProfesional" id="apellidoProfesional" [class.errorClubHonorarios]="!codigo.controls.apellidoProfesional.valid && submitAttempt"></ion-input>
            </ion-item>
            <p style="color:red;"  class="help-block text-danger errorClubHonorarios errorP" *ngIf="!codigo.controls.apellidoProfesional.valid  && submitAttempt">Ingrese el apellido del profesional</p>
          </form><!-- /form -->
          <button float-right style="margin-top: 20px;" color="secondary" ion-button type="submit" (click)="generar()">Generar</button>