blocks|key|4451780|text|你可以|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4451781|[class.has-error]="!form.controls['ctrlEmailAddress'].valid"|code-block|syntax|javascript|4451782|这将在您更改模型时立即添加has-error类。所以基本上你不需要模糊来进行验证检查。|4451783|这解决了angular+2.0.0测试版的问题;)|4451784|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You may 

<pre><code>[class.has-error]="!form.controls['ctrlEmailAddress'].valid"
</code></pre>

This will add has-error class as soon as you will change model. So basically you don't need to blur to have validation check. 

This solved problem with angular 2.0.0 beta ;)

blocks|key|4451660|text|在rc6中找到了一种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4451661|1-创建指令:+validate-onblur.directive.ts|4451662|@Directive({
++selector:+'[validate-onblur]',
++host:+{
++++'(focus)':+'onFocus($event)',
++++'(blur)':+'onBlur($event)'
++}
})
export+class+ValidateOnBlurDirective+{
++++constructor(public+formControl:+NgControl)+{
++++}

++++onFocus($event)+{
++++++this.formControl.control.markAsUntouched(false);
++++}

++++onBlur($event)+{
++++++this.formControl.control.markAsTouched(true);
++++}
}|code-block|syntax|javascript|4451663|然后在html模板中，只需将指令添加到表单中，我的示例使用ReactiveFormsModule模型。|4451664|然后将以下内容添加到错误消息中：|4451665|<input+type="text"+formControlName="full_name"+validate-onblur+/>

<span+*ngIf="formAccountDetails.controls.full_name.touched+&&+!formAccountDetails.controls.full_name.valid+&&+!formAccountDetails.controls.full_name.pristine"+class="errors">
++++++++...
|4451666|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Found a way, in rc6.

1- Create a directive: validate-onblur.directive.ts 

<pre><code>@Directive({
 selector: '[validate-onblur]',
 host: {
 '(focus)': 'onFocus($event)',
 '(blur)': 'onBlur($event)'
 }
})
export class ValidateOnBlurDirective {
 constructor(public formControl: NgControl) {
 }

 onFocus($event) {
 this.formControl.control.markAsUntouched(false);
 }

 onBlur($event) {
 this.formControl.control.markAsTouched(true);
 }
}
</code></pre>

Then in your html template just add the directive to your form, my example use the ReactiveFormsModule model.

Then add this to your error message:

<pre><code>&lt;input type="text" formControlName="full_name" validate-onblur /&gt;

&lt;span *ngIf="formAccountDetails.controls.full_name.touched &amp;&amp; !formAccountDetails.controls.full_name.valid &amp;&amp; !formAccountDetails.controls.full_name.pristine" class="errors"&gt;
 ...
&lt;/span&gt;
</code></pre>

blocks|key|4451704|text|我对Alex+Shestakov的解决方案做了一点改进，顺便说一句，这个方案已经起作用了，为了避免在保持焦点不变的情况下将控件状态设置为有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4451705|@Directive({
++++selector:+'[validate-onblur]',
++++host:+{
++++++++'(focus)':+'onFocus($event)',
++++++++'(blur)'+:+'onBlur($event)'
++++}
})
export+class+ValidateOnBlurDirective+{

++++private+validators:+any;
++++private+asyncValidators:+any;
++++private+hasFocus+=+false;

++++constructor(public+formControl:+NgControl)+{
++++}

++++onFocus($event)+{
++++++++this.hasFocus+=+true;
++++++++this.validators+=+this.formControl.control.validator;
++++++++this.asyncValidators+=+this.formControl.control.asyncValidator;
++++++++this.formControl.control.clearAsyncValidators();
++++++++this.formControl.control.clearValidators();
++++++++this.formControl.control.valueChanges
++++++++++++.filter(()+=>+this.hasFocus)
++++++++++++.subscribe(()+=>+this.formControl.control.markAsPending());
++++}

++++onBlur($event)+{
++++++++this.hasFocus+=+false;
++++++++this.formControl.control.setAsyncValidators(this.asyncValidators);
++++++++this.formControl.control.setValidators(this.validators);
++++++++this.formControl.control.updateValueAndValidity();
++++}
}|code-block|syntax|javascript|4451706|这样，只要控件保持焦点，它就会保持挂起状态。这将有助于避免当控件在获得焦点之前是无效的，然后一旦用户开始在它上键入，它就被标记为有效的情况，在模糊事件发生之前，当再次设置验证器时，应该确定控件的实际有效性。|4451707|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I have improved a little bit Alex Shestakov solution, which already worked by the way, in order to avoid setting the control state to valid when its value changes while it keeps the focus.

<pre><code>@Directive({
 selector: '[validate-onblur]',
 host: {
 '(focus)': 'onFocus($event)',
 '(blur)' : 'onBlur($event)'
 }
})
export class ValidateOnBlurDirective {

 private validators: any;
 private asyncValidators: any;
 private hasFocus = false;

 constructor(public formControl: NgControl) {
 }

 onFocus($event) {
 this.hasFocus = true;
 this.validators = this.formControl.control.validator;
 this.asyncValidators = this.formControl.control.asyncValidator;
 this.formControl.control.clearAsyncValidators();
 this.formControl.control.clearValidators();
 this.formControl.control.valueChanges
 .filter(() =&gt; this.hasFocus)
 .subscribe(() =&gt; this.formControl.control.markAsPending());
 }

 onBlur($event) {
 this.hasFocus = false;
 this.formControl.control.setAsyncValidators(this.asyncValidators);
 this.formControl.control.setValidators(this.validators);
 this.formControl.control.updateValueAndValidity();
 }
}
</code></pre>

This way the control will remain in pending state as long as it keeps the focus. That will help to avoid the case when a control is invalid before it gets the focus and then as soon as the user starts typing on it, it is marked as valid, before the blur event happens, when validators are set again and real validity of the control should be determined.

I'm looking at adding some basic email validation to check that the user has put in a correct email address. Currently using the method below, the validation updates as the user types, which looks odd when it errors after entering one character.

<pre><code>validEmail(c: Control){
if(!c.value.match('[a-z0-9!#$%&amp;\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&amp;\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?')){
 return {
 validEmail: true
 };
}
return null;
} 

ctrlEmailAddress: Control = new Control('', Validators.compose([
Validators.required, this.validEmail]));
</code></pre>

I was wondering if it is possible to trigger the validation on blur of the field, like in angularJS with:

<pre><code>ng-model-options="{ updateOn: 'blur' }"
</code></pre>

I'm aware of the blur option on the input field within the html but this doesn't put my control in error unless there is a way to put the control into an error state.

Could anyone help point me in the right direction?

Thanks.

Edit: I'm looking for a angular2 solution, not an angularJS solution.

Angular2 - FormControl Validation on blur

我正在考虑添加一些基本的电子邮件验证，以检查用户是否输入了正确的电子邮件地址。目前使用下面的方法，验证随着用户输入而更新，当输入一个字符后出现错误时，这看起来很奇怪。validEmail(c: Control){if(!c.value.match('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\....

问模糊上的Angular2 - FormControl验证
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模糊上的Angular2 - FormControl验证EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模糊上的Angular2 - FormControl验证
EN