Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/fs/package.module.fs.php on line 258

Warning: preg_match(): Compilation failed: invalid range in character class at offset 31 in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/router/package.module.router.php on line 465

Warning: preg_match(): Compilation failed: invalid range in character class at offset 30 in /home/niteshcpanel2/public_html/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/router/package.module.router.php on line 465
Angular 4 model driven form validation | Nitesh Thapa

Angular 4 Model driven form validation

In angular4 you can easily validate form with model driven approach we will validate the same form (Demo) that we have validate using template driven approach with model driven approach all logic and validaiton done in component .If you go to the demo link you can also see the current status and value on the bottom of the form.If you click the submit button it will show you all the error field at the same time and when you start filling the forms you will get appropriate message according to fields validation. Important thing to remember you have to add ReactiveFormsModuleand and import to use model driven approach in app.module.cs.and also you have to add FormGroup,FormBuilder,Validators in component where you want to use validation.app.component.cs
Demo

app.module.cs

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule} from '@angular/forms'
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="container">
<h4>Model Driven Form</h4>
<form [formGroup]="formValue" (ngSubmit)="onSubmit()">
  <div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control form-control-sm" formControlName="fname">
  <div *ngIf="formValue.controls['fname'].hasError('required') &&
 (formValue.controls['fname'].dirty || formValue.controls['fname'].touched) || formValue.controls['fname'].pristine && submitted" class="alert alert-danger">
Last name is required
</div>
 <div *ngIf="formValue.controls['fname'].hasError('minlength') &&
 (formValue.controls['fname'].dirty || formValue.controls['fname'].touched)" class="alert alert-danger">
 Minimum 4 character is required
</div>

    
  </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
    <label>Last Name</label>
    <input type="text" class="form-control form-control-sm" formControlName="lname">
    <div *ngIf="formValue.controls['lname'].hasError('required') &&
 (formValue.controls['lname'].dirty || formValue.controls['lname'].touched) || formValue.controls['lname'].pristine && submitted" class="alert alert-danger">
Last name is required
</div>
 <div *ngIf="formValue.controls['lname'].hasError('minlength') &&
 (formValue.controls['lname'].dirty || formValue.controls['lname'].touched)" class="alert alert-danger">
 Minimum 4 character is required
</div>
  </div>
  </div>
</div>
 <div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>Email</label>
    <input  type="email" formControlName="email" class="form-control form-control-sm" >
     <div *ngIf="formValue.controls['email'].hasError('required') &&
 (formValue.controls['email'].dirty || formValue.controls['email'].touched)|| formValue.controls['email'].pristine && submitted" class="alert alert-danger">
Email is required.
</div>
   <div *ngIf="formValue.controls['email'].hasError('pattern')" class="alert alert-danger">
 Enter valid email address.
</div>
   
  </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
    <label>Address</label>
     <input  type="text" formControlName="addrress" class="form-control form-control-sm" >
      <div *ngIf="formValue.controls['addrress'].hasError('required') &&
 (formValue.controls['addrress'].dirty || formValue.controls['addrress'].touched)|| formValue.controls['addrress'].pristine && submitted" class="alert alert-danger">
Addrress is required.
</div>
   <div *ngIf="formValue.controls['addrress'].hasError('minlength') &&
 (formValue.controls['addrress'].dirty || formValue.controls['addrress'].touched)" class="alert alert-danger">
Minimum 20 character is required
</div>
    </div>
    </div>
    </div>
  <div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>Gender</label>
      <div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio"  formControlName="gender" value="Male"> Male
    </label>
</div>
 <div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" formControlName="gender" value="Female"> Female
  </label>
</div>
  <div *ngIf="formValue.controls['gender'].hasError('required') && (formValue.controls['gender'].dirty || formValue.controls['gender'].touched) || formValue.controls['gender'].pristine && submitted" class="alert alert-danger">
Gender is required.
</div>
  </div>
    </div>
     <div class="col-sm">
      <div class="form-group">
    <label>Country</label>
      <select [(ngModel)]='defaultValue' formControlName="country" class="form-control">
          <option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
      </select>
  <div *ngIf=" formValue.controls['country'].value == 'Select Country' && formValue.controls['country'].dirty || formValue.controls['country'].pristine && submitted" class="alert alert-danger">
                  Country is required
    </div>
    
  </div>
    </div>
  </div>
<div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>Multi Select</label>
    <select multiple class="form-control" formControlName="multiselect">
      <option  *ngFor="let value of digit" [ngValue]="value">{{value}}</option>
     
    </select>
     <div *ngIf="formValue.controls['multiselect'].pristine && submitted" class="alert alert-danger">
                 Select from multiselect
    </div>
 
  </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
         <label for="exampleFormControlFile1">zip</label>
         <input  type="text" formControlName="zipcode" class="form-control form-control-sm" >
          <div *ngIf="formValue.controls['zipcode'].hasError('required') &&
 (formValue.controls['zipcode'].dirty || formValue.controls['zipcode'].touched) || formValue.controls['zipcode'].pristine && submitted" class="alert alert-danger">
 zip is required.
</div>
   <div *ngIf="formValue.controls['zipcode'].hasError('pattern') &&
 (formValue.controls['zipcode'].dirty || formValue.controls['zipcode'].touched)" class="alert alert-danger">
  Enter 6 digit postal code.
</div>
    
  </div>
    </div>
    </div>
<div class="row">
    <div class="col-sm">
    <div class="form-group">
    <label for="exampleFormControlTextarea1">Textarea</label>
    <textarea class="form-control" formControlName="message" rows="3"></textarea>

<div *ngIf="formValue.controls['message'].hasError('required') &&
 (formValue.controls['message'].dirty || formValue.controls['message'].touched) || formValue.controls['message'].pristine && submitted" class="alert alert-danger">
  Message is required
</div>
   <div *ngIf="formValue.controls['message'].hasError('minlength') &&
 (formValue.controls['message'].dirty || formValue.controls['message'].touched)" class="alert alert-danger">
  Message should not be less than 20 character.
</div>


  </div></div></div>
  <div class="row">
    <div class="col-sm">
<div class="form-check">
    <label class="form-check-label">
      <input ngModel type="checkbox" formControlName="tick"  class="form-check-input">
     Tick checkbox
    </label>
    <div *ngIf=" formValue.controls['tick'].pristine && submitted" class="alert alert-danger">
  Select our term and condition.
</div>
   
  </div> </div> </div>
  <pre>{{formValue.valid | json}}</pre>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
      <pre>{{formValue.value | json}}</pre>
app.component.cs
import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
   values:Array<string> = ['Select Country','India', 'Australia','Canada'];
   defaultValue = this.values[0];
  digit:Array<number> = [1,2,3,4,5,6];
    public submitted: boolean;

formValue:FormGroup;
constructor(public _formBuilder:FormBuilder){}
ngOnInit(){
    this.formValue = this._formBuilder.group({
    fname:['',[Validators.required,Validators.minLength(4)]],
    lname: ['',[Validators.required,Validators.minLength(4)]],
    email: ['',[Validators.required,Validators.pattern('[^ @]*@[^ @]*')]],
    addrress: ['',[Validators.required,Validators.minLength(20)]],
    gender:  ['',[Validators.required]],
    country:  ['',[Validators.required]],
    multiselect:  ['',[Validators.required]],
    zipcode:  ['',[Validators.required,Validators.pattern('^[1-9][0-9]{5}$')]],
    message:  ['',[Validators.required,Validators.minLength(20)]],
    tick: ['',[Validators.required]]
  })
}


 onSubmit(){
     this.submitted = true;
   console.log(this.formValue.value)

}
}

Demo


Notice: compact(): Undefined variable: limits in /home/niteshcpanel2/public_html/wp-includes/class-wp-comment-query.php on line 821

Notice: compact(): Undefined variable: groupby in /home/niteshcpanel2/public_html/wp-includes/class-wp-comment-query.php on line 821

Warning: count(): Parameter must be an array or an object that implements Countable in /home/niteshcpanel2/public_html/wp-includes/class-wp-comment-query.php on line 399

Leave a Reply

Your email address will not be published. Required fields are marked *