如何使用angular 5验证网站地址

我想验证angular 5中的url是否不工作

---

要在反应式表单中验证URL/Web地址，您可以按照下面的方法，对表单控件使用

Validators.pattern

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

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

要验证模板驱动表单中的URL/Web地址，您应该创建一个自定义验证器指令，如下所示

@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与regex一起使用：

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

谢谢您的回复。我使用的是模板驱动的方法。不确定什么网站：[''，Validators.pattern（urlRegex）]，代码正在执行嗨，我已经做了下面的URL URL是必需的URL是无效的一个问题是当URL.errors如何检查.ts文件时调用onblur。这个问题是什么意思？您能解释一下吗？bitI已经尝试过您的解决方案，但patternValidator中没有定义请帮助您在模块声明中添加了它吗？