[英]how to validate website address using angular 5
I would like to validate url in angular 5 not working. 我想验证角度5中的网址无法正常工作。
<input type="url" name="url" id="url" ngModel pattern="https?://.+">
<div *ngIf="url.errors && (url.dirty || url.touched)" class="alert alert-danger">
<div [hidden]="!url.errors.pattern">
</div>
</div>
To Validate the URL / Web address in a reactive form you can follow the below method, using Validators.pattern
against the form control. 要以反应形式验证URL / Web地址,可以遵循以下方法,对窗体控件使用Validators.pattern
。
const urlRegex = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
this.hospitalForm = this.fb.group({
Website: ['', Validators.pattern(urlRegex)],
});
To validate the URL / Web Address in a template driven form, you should create a custom Validator directive as follows 要以模板驱动的形式验证URL / Web地址,您应该创建一个自定义的Validator指令,如下所示
@Directive({
selector: '[appPattern]',
providers: [{provide: NG_VALIDATORS, useExisting: PatternValidatorDirective, multi: true}]
})
export class PatternValidatorDirective implements Validator {
@Input('appPattern') pattern: string;
validate(control: AbstractControl): {[key: string]: any} | null {
return this.pattern ? this.patternValidator(new RegExp(this.pattern, 'i'))(control)
: null;
}
patternValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const regextest = nameRe.test(control.value);
return (!regextest) ? {'apppattern': {value: control.value}} : null;
};
}
}
In your input, you should use appUrl with the regex, : 在输入中,应将appUrl与regex一起使用:
<input type="url" name="url" id="url" ngModel appPattern="(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.