如何使用 Angular 5 验证网站地址答案

【问题标题】：how to validate website address using angular 5如何使用 Angular 5 验证网站地址
【发布时间】：2019-03-04 04:56:37
【问题描述】：

我想验证 Angular 5 中的 url 不起作用。

<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>

【问题讨论】：

标签： angular url-validation

【解决方案1】：

要在响应式表单中验证 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，：

<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
你说的那个问题是什么意思？你能解释一下吗
我试过你的解决方案，但 patternValidator 没有定义请帮忙
你在你的模块声明中添加了它吗？