如何使用角度5验证网站地址

时间:2019-03-04 04:56:38

标签: angular url-validation

我想验证角度5中的网址不起作用。

{{1}}

1 个答案:

答案 0 :(得分:0)

要以反应形式验证URL /网址,您可以按照以下方法,对表单控件使用Validators.pattern

const urlRegex = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';

 this.hospitalForm = this.fb.group({
   Website: ['', Validators.pattern(urlRegex)],
 });

要以模板驱动的形式验证URL /网址,您应按以下步骤创建自定义的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;
   };
  }
}

在输入中,应将appUrl与正则表达式一起使用:

<input  type="url" name="url" id="url" ngModel appPattern="(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?">