<!-- Template-driven Form Validaton Starts --> <div class="row"> <div class="col-sm-12"> <div class="card"> <div class="card-header bg-info"> <h4 class="card-title mb-0 text-white">Simple validation Form</h4> </div> <div class="card-body"> <form class="form" (ngSubmit)="onTemplateFormSubmit()" #f="ngForm"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="floatEmail">Email</label> <input type="email" class="form-control" id="floatEmail" name="floatEmail" ngModel required email #floatEmail="ngModel" [ngModelOptions]="{updateOn: 'blur'}"> <small class="form-text text-danger" *ngIf="!floatEmail.valid && (floatEmail.dirty || floatEmail.touched)">Please enter a valid email!</small> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="floatPassword">Password</label> <input type="password" class="form-control" id="floatPassword" name="floatPassword" ngModel required minlength="4" maxlength="24" [ngModelOptions]="{updateOn: 'blur'}" #floatPassword="ngModel"> <small class="form-text text-danger" *ngIf="!floatPassword.valid && (floatPassword.dirty || floatPassword.touched)">Password characters length must be between 4 and 24 !</small> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="floattextArea">Textarea</label> <textarea class="form-control" rows="3" id="floattextArea" name="floattextArea" ngModel required #textArea="ngModel" [ngModelOptions]="{updateOn: 'blur'}"></textarea> <small class="form-text text-danger" *ngIf="!textArea.valid && (textArea.dirty || textArea.touched)">This field is required!</small> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <button type="button" class="btn btn-success btn-raised mr-1" [disabled]="!f.valid">Submit</button> <button type="button" class="btn btn-dark btn-raised">Cancel</button> </div> </div> </form> </div> </div> </div> </div> <!-- Template-driven Form Validaton Ends --> <!-- Reactive Form Validaton Starts --> <div class="row"> <div class="col-sm-12"> <div class="card"> <div class="card-header bg-dark"> <h4 class="card-title mb-0 text-white">Regular Form (Reactive Form)</h4> </div> <div class="card-body"> <div class="card-block"> <form [formGroup]="regularForm" (ngSubmit)="onReactiveFormSubmit()" novalidate> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" formControlName="inputEmail" required> <small class="form-text text-danger" *ngIf="!regularForm.get('inputEmail').valid && (regularForm.get('inputEmail').dirty || regularForm.get('inputEmail').touched)">Please enter a valid email!</small> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" formControlName="password" required> <small class="form-text text-danger" *ngIf="!regularForm.get('password').valid && (regularForm.get('password').dirty || regularForm.get('password').touched)">Password characters length must be between 4 and 24 !</small> </div> <div class="form-group"> <label for="textArea">Textarea</label> <textarea class="form-control" rows="3" id="textArea" formControlName="textArea" required></textarea> <small class="form-text text-danger" *ngIf="!regularForm.get('textArea').valid && (regularForm.get('textArea').dirty || regularForm.get('textArea').touched)">This field is required!</small> </div> <div class="form-group"> <label class>Radios</label> <div class="" *ngFor="let radioOption of radioOptions"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" class="custom-control-input" [value]="radioOption" formControlName="radioOption"> <label class="custom-control-label" for="customRadio2">{{ radioOption }}</label> </div> </div> </div> <div class="form-group"> <button type="button" class="btn btn-success btn-raised mr-1" [disabled]="!regularForm.valid">Submit</button> <button type="button" class="btn btn-dark btn-raised">Cancel</button> </div> </form> </div> </div> </div> </div> </div> <!-- Reactive Form Validaton Ends --> <!-- Custom Form Validaton Starts --> <div class="row"> <div class="col-sm-12"> <div class="card"> <div class="card-header bg-success"> <h4 class="card-title mb-0 text-white">Custom Validations (Template-driven Form)</h4> </div> <div class="card-body"> <div class="card-block"> <form (ngSubmit)="onCustomFormSubmit()" #vform="ngForm"> <div class="form-group"> <label for="required">Required</label> <input type="text" class="form-control" ngModel name="required" #required="ngModel" required placeholder="required" /> <small class="form-text text-danger" *ngIf="required.errors?.required">required error</small> </div> <div class="form-group"> <label for="minlength">Minlength</label> <input type="text" class="form-control" ngModel name="minlength" #minlength="ngModel" placeholder="minlength 5" minlength="5" /> <small class="form-text text-danger" *ngIf="minlength.errors?.minlength">minlength error</small> </div> <div class="form-group"> <label for="maxlength">Maxlength</label> <input type="text" class="form-control" ngModel name="maxlength" #maxlength="ngModel" placeholder="maxlength 5" maxlength="5" /> <small class="form-text text-danger" *ngIf="maxlength.errors?.maxlength">required error</small> </div> <div class="form-group"> <label for="rangelength">Rangelength</label> <input type="text" class="form-control" ngModel name="rangelength" #rangelength="ngModel" placeholder="rangeLength [5, 9]" [rangeLength]="[5, 9]" /> <small class="form-text text-danger" *ngIf="rangelength.errors?.rangeLength">rangelength error</small> </div> <div class="form-group"> <label for="pattern">Pattern</label> <input type="text" class="form-control" ngModel name="pattern" #pattern="ngModel" placeholder="[a-z]{6}" pattern="[a-z]{6}" /> <small class="form-text text-danger" *ngIf="pattern.errors?.pattern">pattern error</small> </div> <div class="form-group"> <label for="base64">Base64</label> <input type="text" class="form-control" ngModel name="base64" #base64="ngModel" placeholder="base64" base64 /> <small class="form-text text-danger" *ngIf="base64.errors?.base64">base64 error</small> </div> <div class="form-group"> <label for="creditCard">CreditCard</label> <input type="text" class="form-control" ngModel name="creditCard" #creditCard="ngModel" placeholder="creditCard" creditCard /> <small class="form-text text-danger" *ngIf="creditCard.errors?.creditCard">creditCard error</small> </div> <div class="form-group"> <label for="date">Date</label> <input type="date" class="form-control" ngModel name="date" #date="ngModel" placeholder="date" date /> <small class="form-text text-danger" *ngIf="date.errors?.date">date error</small> </div> <div class="form-group"> <label for="dateISO">DateISO</label> <input type="text" class="form-control" ngModel name="dateISO" #dateISO="ngModel" placeholder="dateISO" dateISO /> <small class="form-text text-danger" *ngIf="dateISO.errors?.dateISO">dateISO error</small> </div> <div class="form-group"> <label for="maxDate">MaxDate</label> <input type="date" class="form-control" ngModel name="maxDate" #maxDate="ngModel" placeholder="maxDate 2017-11-11" maxDate="2017-11-11" /> <small class="form-text text-danger" *ngIf="maxDate.errors?.maxDate">maxDate error</small> </div> <div class="form-group"> <label for="minDate">MinDate</label> <input type="date" class="form-control" ngModel name="minDate" #minDate="ngModel" placeholder="minDate 2017-11-11" minDate="2017-11-11" /> <small class="form-text text-danger" *ngIf="minDate.errors?.minDate">minDate error</small> </div> <div class="form-group"> <label for="digits">Digits</label> <input type="text" class="form-control" ngModel name="digits" #digits="ngModel" placeholder="digits" digits /> <small class="form-text text-danger" *ngIf="digits.errors?.digits">digits error</small> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" ngModel name="email" #email="ngModel" placeholder="email" email /> <small class="form-text text-danger" *ngIf="email.errors?.email">email error</small> </div> <div class="form-group"> <label for="equal">Equal</label> <input type="text" class="form-control" ngModel name="equal" #equal="ngModel" placeholder="equal to apex" equal="apex" /> <small class="form-text text-danger" *ngIf="equal.errors?.equal">equal error</small> </div> <div class="form-group"> <label for="notEqual">NotEqual</label> <input type="text" class="form-control" ngModel name="notEqual" #notEqual="ngModel" placeholder="not equal to apex" notEqual="apex" /> <small class="form-text text-danger" *ngIf="notEqual.errors?.notEqual">notEqual error</small> </div> <div class="form-group"> <label for="password">EqualTo</label> <input type="text" class="form-control" ngModel name="password" #password="ngModel" placeholder="password" required /> <small class="form-text text-danger" *ngIf="password.errors?.required">required error</small> </div> <div class="form-group"> <input type="text" class="form-control" ngModel name="equalTo" #equalTo="ngModel" placeholder="confirm password" [equalTo]="password" /> <small class="form-text text-danger" *ngIf="equalTo.errors?.equalTo">equalTo error</small> </div> <div class="form-group"> <label for="oldPassword">NotEqualTo</label> <input type="text" class="form-control" ngModel name="oldPassword" #oldPassword="ngModel" placeholder="password" required /> <small class="form-text text-danger" *ngIf="oldPassword.errors?.required">required error</small> </div> <div class="form-group"> <input type="text" class="form-control" ngModel name="notEqualTo" #notEqualTo="ngModel" placeholder="confirm password" [notEqualTo]="oldPassword" /> <small class="form-text text-danger" *ngIf="notEqualTo.errors?.notEqualTo">notEqualTo error</small> </div> <div class="form-group"> <label for="gt">Gt</label> <input type="text" class="form-control" ngModel name="gt" #gt="ngModel" placeholder="gt 20" gt="20" /> <small class="form-text text-danger" *ngIf="gt.errors?.gt">gt error</small> </div> <div class="form-group"> <label for="lt">Lt</label> <input type="text" class="form-control" ngModel name="lt" #lt="ngModel" placeholder="lt 10" lt="10" /> <small class="form-text text-danger" *ngIf="lt.errors?.lt">lt error</small> </div> <div class="form-group"> <label for="json">Json</label> <input type="text" class="form-control" ngModel name="json" #json="ngModel" placeholder="json" json /> <small class="form-text text-danger" *ngIf="json.errors?.json">json error</small> </div> <div class="form-group"> <label for="max">Max</label> <input type="text" class="form-control" ngModel name="max" #max="ngModel" placeholder="max 10" max="10" /> <small class="form-text text-danger" *ngIf="max.errors?.max">max error</small> </div> <div class="form-group"> <label for="min">Min</label> <input type="text" class="form-control" ngModel name="min" #min="ngModel" placeholder="min 10" min="10" /> <small class="form-text text-danger" *ngIf="min.errors?.min">min error</small> </div> <div class="form-group"> <label for="number">Number</label> <input type="text" class="form-control" ngModel name="number" #number="ngModel" placeholder="number" number /> <small class="form-text text-danger" *ngIf="number.errors?.number">number error</small> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="text" class="form-control" ngModel name="phone" #phone="ngModel" placeholder="phone" phone /> <small class="form-text text-danger" *ngIf="phone.errors?.phone">phone error</small> </div> <div class="form-group"> <label for="url">Url</label> <input type="text" class="form-control" ngModel name="url" #url="ngModel" placeholder="url" url /> <small class="form-text text-danger" *ngIf="url.errors?.url">url error</small> </div> <div class="form-group"> <label for="uuid">Uuid</label> <input type="text" class="form-control" ngModel name="uuid" #uuid="ngModel" placeholder="uuid" uuid /> <small class="form-text text-danger" *ngIf="uuid.errors?.uuid">uuid error</small> </div> </form> </div> </div> </div> </div> </div>