我已经采取了三个输入字段并给出了必要的验证..但我无法对这些进行命名空间验证.. plz提供了如何做到这一点的方式谢谢
以下是app.component.html
的代码<h4>{{title}}</h4>
<div class="col-sm-10">
<button type="button" class="btn btn-default" (click)="createEmp()">Create Employee</button>
</div>
<div style="margin-top: 60px;">
<div class = "container">
<div *ngIf="add">
<h2>Add Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
<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" name="name" minlength="4" [(ngModel)]="model.name" placeholder="Enter Your Name"
#name="ngModel" required/>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</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" name="position" minlength="4" [(ngModel)]="model.position" placeholder="Enter your position"
#position="ngModel" required />
<div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
<div *ngIf="position.errors.required">
Position is required.
</div>
<div *ngIf="position.errors.minlength">
Position must be at least 4 characters long.
</div>
</div>
</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" name="salary" pattern="[0-9]*"
maxlength="5" [(ngModel)]="model.salary" placeholder="Enter Salary" #salary="ngModel" required />
<div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger">
<div *ngIf="salary.errors.required">
Salary is required.
</div>
<div *ngIf="salary.errors?.pattern">Only numebers should be typed
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" (click)="addEmployee()" [disabled]="empForm.invalid">Add Employee</button>
</div>
</div>
</form>
</div>
<div *ngIf="edit">
<h2>Update Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
<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"
name="name" minlength="4" [(ngModel)]="model2.name" placeholder="Enter Your Name" #name="ngModel" required/>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</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"
name="position" minlength="4" [(ngModel)]="model2.position" placeholder="Enter your position" #position="ngModel" required/>
<div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
<div *ngIf="position.errors.required">
Position is required.
</div>
<div *ngIf="position.errors.minlength">
Position must be at least 4 characters long.
</div>
</div>
</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"
name="salary" pattern="[0-9]*" maxlength="5" [(ngModel)]="model2.salary" placeholder="Enter Salary" #salary="ngModel" required/>
<div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger">
<div *ngIf="salary.errors.required">
Salary is required.
</div>
<div *ngIf="salary.errors?.pattern">Only numebers should be typed
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" (click)="updateEmployee()" [disabled]="empForm.invalid">Update Employee</button>
</div>
</div>
</form>
</div>
<div *ngIf="Show">
<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>
</div>
</div>
</div>
以下是app.component.ts的代码
import {Component, OnInit} from '@angular/core';
import { FormControl, FormGroup , Validators} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
model:any={};
model2:any={};
edit= false;
add=false;
create=true;
Show=false;
myValue;
ngOnInit(){
this.model = new FormGroup({
'name': new FormControl(this.model.name, [
Validators.required,
Validators.minLength(4),
]),
'position': new FormControl(this.model.position, [Validators.required,
Validators.minLength(4),]),
'salary': new FormControl(this.model.salary, Validators.required)
});
}
title = 'Welcome to the Site';
employees = [{name :"Sunil", position : "Developer", salary : 20000},
{name :"Vamshi", position : "Java Developer", salary : 30000},
{name : "Chethan", position : ".Net Developer", salary : 10000}];
createEmp(){
this.add=true;
this.create=false;
this.Show=false;
this.edit=false;
}
addEmployee()
{
console.log()
this.employees.push(this.model);
this.Show = true;
this.add=false;
this.model = {};
}
deleteEmployee(i){
this.employees.splice(i,1)
this.Show=true;
console.log(i);
}
editEmployee(k){
this.edit = true;
this.Show=false;
this.add=false;
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(){
this.Show=true;
this.edit = false;
let k = this.myValue;
for(let i=0;i<this.employees.length;i++){
if(i==k)
{
this.employees[i]= this.model2;
this.model2 = {};
}
}
}
}
输入字段也占用空格..是否有任何其他方式让它们不占用任何空格并继续前进？
答案 0 :(得分：1)
使用pattern validator进行自定义RegExp验证。这是一个正则表达式，它只匹配不包含任何空格的字符串。
^\S*$
你可以像使用FormBuilder一样使用它。
formControlName: ['', Validator.pattern(/^\S*/)]