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

您应考虑设立形式的检验'角度的方式'使用反应形式和角的形式建设者。

首先，你应该导入需要的表单类（假设你已经配置了相应的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] 

}); 

你怎么能阻止提交表单，除非该数据是有效的

可以隐藏/显示提交按钮和残疾人版本删除click事件。请参阅下面的示例...

<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