我是Angular的新手,正在制作一个反应式表单。
我在'em'标记上具有* ngIf指令,该指令可验证Input文本值是否有效,如果无效,则应将'em'标记注入HTML并显示“ Required”
<em *ngIf="!validateLastName()">Required</em>
每当我将鼠标从Input控件移开时,如何获得此* ngIf触发?
这是整个div:
<div class="form-group" [ngClass]="{'error' :!validateLastName()}">
<label for="lastName">Last Name:</label>
<em *ngIf="!validateLastName()">Required</em>
<input formConrolName="lastName" id="lastName" type="text"
class="form-control" placeholder="Last Name..." />
</div>
这是组件中的验证代码:
validateLastName(){
return this.lastName.valid || this.lastName.untouched
}
我正在学习有关Pluralsight的Angular课程(Jim Cooper和Joe Eames撰写的Angular基础知识),课程作者在离开控件时可以在em标签上启用他的“ validateLastName()方法。我看不到如果他们具有导致验证发生的任何其他设置或代码,当他们离开输入导航时,它似乎只是自动发生。
有任何想法吗?
这是此组件的完整HTML代码(profile.component.html):
<div>
<h1>Edit Your Profile </h1>
<hr>
<div class="col-md-4">
<form [formGroup]="profileForm" (ngSubmit)="saveProfile(profileForm.value)"
autocomplete="off" novalidate>
<div class="form-group" [ngClass]="{'error' : !validateFirstName() }">
<label for="firstName">First Name:</label>
<em *ngIf="!validateFirstName()">Required</em>
<input fromControlName="firstName" id="firstName" (blur)="validateLastName()" type="text"
class="form-control" placeholder="First Name..." />
</div>
<div class="form-group" [ngClass]="{'error' :!validateLastName()}">
<label for="lastName">Last Name:</label>
<em *ngIf="!validateLastName()">Required</em>
<input formConrolName="lastName" id="lastName" type="text"
class="form-control" placeholder="Last Name..." />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" (click)="cancel" class="btn btn-default">Cancel</button>
</form>
</div>
</div>
这是组件(profile.component.ts):
import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AuthService } from './auth.service'
import { Router } from "@angular/router"
@Component({
templateUrl: "./profile.component.html",
styles: [`
em {float-right; color:#E05C65; padding-left: 10px;}
.error input {background-color:#E3C3C5;}
.error ::-webkit-input-placeholder { color: #999; }
.error ::-moz-placeholder { color: #999 }
.error :-moz-placeholder { color: #999 }
.error :ms-input-placeholder { color: #999 }
`]
})
export class ProfileComponent implements OnInit {
profileForm:FormGroup
private firstName:FormControl
private lastName:FormControl
constructor(private auth:AuthService, private router:Router){
}
ngOnInit(){
this.firstName = new FormControl(
this.auth.currentUser.firstName, Validators.required)
this.lastName = new FormControl(
this.auth.currentUser.lastName, Validators.required)
this.profileForm = new FormGroup({
firstName: this.firstName,
lastName: this.lastName
})
}
saveProfile(formValues){
console.log("Form is valid: " + this.profileForm.valid)
if (this.profileForm.valid){
this.auth.updateCurrentUser(formValues.firstName.value,
formValues.lastName.value)
this.router.navigate(["events"])
}
}
validateFirstName(){
console.log("Is Valid: " + (this.firstName.valid ||
this.firstName.untouched))
return this.firstName.valid || this.firstName.untouched
}
validateLastName(){
return this.lastName.valid || this.lastName.untouched
}
cancel(){
this.router.navigate(["events"])
}
}
有适当的方法来处理您的情况,这是可运行的演示:
<em *ngIf="!isLastNameValid()">Required</em>
<br />
<input type="text" [(ngModel)]="value"/>
value = "Cattie";
isLastNameValid() {
return this.value === "Cattie";
}
<em *ngIf="!isValid">Required</em>
<br />
<input type="text" #myInput (blur)="validateName(myInput.value)"/>
isValid = false;
validateName(value: string) {
this.isValid = value === "Cattie";
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句