angular-cli表单验证

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是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>

这是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 = {};
            }
        }
    }

}

这是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 { }

现在我想向上面的代码添加验证，我不想将未填充的数据字段添加到...我试了很多方法都不能解决这个问题。

Answer 1

您应该考虑使用reactive forms和angular的表单构建器将表单验证设置为“angular方式”。

首先，您应该导入所需的表单类(假设您已经配置了适当的ngModule)

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

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

现在，您可以配置表单的验证。

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

});

除非数据有效，否则如何阻止表单提交

您可以隐藏/显示提交按钮，并删除禁用版本上的单击事件。请看下面的例子。

<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>

有关angular.io的完整工作示例，请参阅下面的链接。https://angular.io/generated/live-examples/reactive-forms/eplnkr.html