angular-cli form validations

Question

This is the output of my code that i excuted with below codes

My problem is that i am unable do validations here.. after clicking the AddEmployee button even without any data in it.. it is getting added to the data below is the code of app.component.html

<div class = "container">
<h1>{{title}}</h1>
<h2>Add Employee:</h2>
<form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" name="name"
[(ngModel)]="model.name" placeholder="Enter Your Name">

</div>
</div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="position">Position:</label>

      <div class="col-sm-10">          
        <input type="text" class="form-control" id="position" name="position" [(ngModel)]="model.position" placeholder="Enter your position">


</div>
</div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="salary">Salary:</label>


      <div class="col-sm-10">
        <input type="text" class="form-control" id="salary" name="salary" [(ngModel)]="model.salary" placeholder="Enter Salary">


      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" (click)="addEmployee()">Add Employee</button>
      </div>
    </div>
  </form>

<h2>Employee Details</h2>

<table class="table table-bordered">
    <thead>
      <tr>
        <th width=400>Name</th>
        <th width=400>Position</th>
        <th width=200>Salary</th>
    <th width=400>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let employee of employees; let i=index">
        <td>{{employee.name}}</td>
        <td>{{employee.position}}</td>
        <td>{{employee.salary}}</td>
    <td>
    <a class="btn btn-success" (click)="editEmployee(i)">Edit</a>
        <a class="btn btn-danger" (click)="deleteEmployee(i)">Delete</a>
        </td>
    </tr>
        </tbody>
    </table>


<h2>Update Employee:</h2>

<form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" 
    name="name" [(ngModel)]="model2.name"  placeholder="Enter Your Name">

</div>
</div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="position">Position:</label>
      <div class="col-sm-10">          
        <input type="text" class="form-control" id="position" name="position" [(ngModel)]="model2.position" placeholder="Enter your position">
      </div>
</div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="salary">Salary:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="salary" name="salary" [(ngModel)]="model2.salary" placeholder="Enter Salary">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" (click)="updateEmployee()">update Employee</button>
      </div>
    </div>
  </form>


</div>

this is the code of app.component.ts

import { Component } from '@angular/core';




@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'Employee Details';
    employees = [{
        name: "Sunil",
        position: "Developer",
        salary: 20000
    }, {
        name: "Vamshi",
        position: "Java Developer",
        salary: 30000
    }, {
        name: "Chethan",
        position: ".Net Developer",
        salary: 10000
    }];

    model: any = {};
    model2: any = {};
    addEmployee() {
        this.employees.push(this.model);
        this.model = {};
    }

    deleteEmployee(i) {
        this.employees.splice(i, 1)
        console.log(i);
    }
    myValue;
    editEmployee(k) {
        this.model2.name = this.employees[k].name;
        this.model2.position = this.employees[k].position;
        this.model2.salary = this.employees[k].salary;
        this.myValue = k;
    }
    updateEmployee() {
        let k = this.myValue;
        for (let i = 0; i < this.employees.length; i++) {
            if (i == k) {
                this.employees[i] = this.model2;
                this.model2 = {};
            }
        }
    }

}

this is the code of app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';




@NgModule({

declarations: [
    AppComponent
  ],

imports: [
    BrowserModule
,FormsModule  ,ReactiveFormsModule],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

now i want to add validations to the above code that i dont want to add unfilled fields of data to... i tried many ways couldn't solved the issue..

Answer 1

You should consider setting up forms validation the 'angular way' using reactive forms and angular's form builder.

First you should import the required form classes (assuming you've already configured the appropriate ngModule)

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

  constructor(
    private _fb: FormBuilder
  ) {.....}

Now you can configure the validation for the form.

  this.employeeForm = this.fb.group({
  name: ['', Validators.required ],
  position: ['', Validators.required ],
  salary: ['', Validators.required]

});

How can you prevent the form from submitting unless the data is valid

You can hide/show the submit buttons and remove the click event on the disabled version. See example below...

<div class="col-sm-offset-2 col-sm-10">

        <button type="submit" class="btn btn-default disabled" *ngIf=!employeeForm.valid">update Employee</button>

        <button type="submit" class="btn btn-default" *ngIf=employeeForm.valid"(click)="updateEmployee()">update Employee</button>

</div>

For a full working example from angular.io see the link below. https://angular.io/generated/live-examples/reactive-forms/eplnkr.html