默认情况下Angular2触发验证

Question

我正在使用*ngIf="!field.valid并进行简单验证，检查字段是否对<input [ngFormControl]="myForm.controls['field']" type="text" id="field" #field="ngForm"> <span class="error" *ngIf="!field.valid">Error</span> 有效

errors

在加载组件时，始终显示Public Class Form1 Private toolTipMsg As String = "Busy, Please Wait..." & vbCrLf & "Line2 Blah bla bla." Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load ToolTip1.Active = True ToolTip1.IsBalloon = False Timer1.Start() End Sub Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick ' get cursor position Dim cp = Cursor.Position ' offset Y so tooltip is under mouse cp.Y += CInt(Cursor.Size.Height * 1.5) ' show tooltip ToolTip1.Show(toolTipMsg, Me, PointToClient(cp)) End Sub ，然后在任何输入中输入任何内容。如何阻止Angular 2对组件加载运行验证，以便仅在键入时触发？

Answer 1

基本上，表单输入有三种类型的错误类，

• 脏 - 当控件的值发生变化时

• 触摸 - 访问Control时

• 有效 - 当Control的值有效时（根据提供的验证）

根据您的要求，您需要在课程中使用dirty or touched课程， 您可以使用[hidden] as well as *ngIf来使用此错误类（以显示错误消息）。 你可以这样使用：

<span [hidden]="name.valid" *ngIf='name.touched'><b>Required</b></span>

使用错误类看表单working example。

有关错误类的更多信息，请参阅此处

• http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• https://angular.io/docs/ts/latest/guide/forms.html

Answer 2

如果字段为touched或dirty

，请检查该字段

<span class="error" *ngIf="!field.valid && field.dirty">Error</span>