从输入控件导航时如何触发* ngIf指令进行验证

scott_f

我是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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何手动触发Angular 2输入验证?

如何防止更新时进行Spring验证

如何获取输入值以进行验证

在输入控件之外按Enter键时如何触发按钮单击

如何让角度$ asyncValidator在模糊时触发但在输入时使用常规验证器

Angular2如何对自定义验证器指令进行单元测试?

从具有ngIf指令的输入获取值时出错

如何使用反应形式来验证禁用的控件(不触发验证)

身份验证路由componentWillMount或DidMount在导航时未触发?

如何从代码隐藏中同时添加输入和验证控件

ngIf变为true时触发功能,将焦点设置在显示的输入上

Angular 5:响应式表单-更新表单控件时,表单组验证重新触发

一旦ngIf完成呈现html元素,如何在ngIf中触发指令?

如何使用Angular ngIf指令显示或隐藏元素?

如何进行原子指令

Angular.js:对指令生成的输入字段进行表单验证

定义导航用例时,如何对触发操作的页面进行通用引用?

使用jQuery进行输入验证

AngularJS-如何验证元素指令?

如何防止对用户控件的事件处理程序进行验证?

用于验证输入值的指令

如何正确进行输入验证

当文本输入和提交按钮都在 React Native 中的不同 js 文件中时,如何在单击提交时进行空检查并导航到新屏幕?

PyQt 指令是如何进行的?

如何对输入进行验证?

如何配置 Apache 2.4 以使用 SSLProxyMachineCertificatePath 指令向 2 个或更多远程服务器进行身份验证?

当涉及范围时如何验证用户输入?

如何让 llvm 使用“OR”指令进行加速

最小和最大验证在我不使用数组时触发,但在我使用数组控件时不触发