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

}); 

データが有効

でない限り、あなたが提出からフォームを防ぐことができますどのようにボタンを提出し、無効バージョンのクリックイベントを削除表示/非表示にすることができます。下記のリンクを参照してください...以下の例angular.ioからの完全な作業たとえば

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

を参照してください。 https://angular.io/generated/live-examples/reactive-forms/eplnkr.html