我正在做一个有角度的反应形式。面对这个问题,不需要的字段在变脏或被触摸时应该进行一些验证,但是一旦用户离开此文本框/字段,验证消息就应该消失。我尝试使用ng-invalid,但由于第一次加载时具有ng-invalid类,因此该字段不起作用。以下是代码-
<div class="form-group">
<label>Street Name</label>
<input type="text" class="form-control" formControlName="streetName">
<span class="text-danger"
*ngIf="registerForm.get('streetName').touched || registerFormControl.get('streetName').dirty" class="Required">
<span *ngIf="registerForm.get('streetName').error?.pattern || registerForm.get('streetName').error?.minLength">
Pattern & Minlength error
</span>
<span class="text-danger"
*ngIf="registerForm.get('streetName').error?.monthError || registerForm.get('streetName').error?.otherError">
Month and Other Error
</span>
</span>
</div>
FormGroup验证-
streetName:['',{
Validators: [
Validators.pattern(0-9),
Validators.minLength(9),
this.customValidations.streetValid
],
updateOn: 'blur'
}]
如何使此验证消失?
答案 0 :(得分:0)
您可以使用焦点和模糊事件来跟踪用户是否以及何时在输入字段中。
<input (focus)="onFocus()" (blur)="onBlur()">
在此代码示例中,当用户单击/位于输入框中时,将调用onFocus()
。当用户从输入框中单击时,将调用onBlur()
。
我们可以使用它来更好地区分是否应该显示错误消息。
假设您有两个输入:街道名称和街道地址。我们将创建一个onFocus()
函数来处理焦点集中的项目,并创建一个onBlur()
函数来清除焦点集中的选择。
//Class variables
public selectedField = "";
function onFocus(string identifier) {
selectedField = identifier; //set the field
}
function onBlur() {
selectedField = ""; //clear the field
}
现在,在我们的输入上:
<input (focus)="onFocus('streetName')" (blur)="onBlur()" type="text" class="form-control" formControlName="streetName">
<input (focus)="onFocus('streetAddress')" (blur)="onBlur()" type="text" class="form-control" formControlName="streetAddress">
最后,我们可以处理是否应该显示错误消息。我们需要做的就是向错误跨度的* ngIf添加一个条件。
<!--Example Street Name Error Span -->
<span class="text-danger" *ngIf="selectedField == 'streetName' && . . . ">
Invalid Street Name
</span
<!--Example Street Address Error Span -->
<span class="text-danger" *ngIf="selectedField == 'streetAddress' && . . . ">
Invalid Street Address
</span
如果您想更好地了解焦点的工作原理,可以here找到它。