Question

你好，

我正在使用Angular Material，并且已经创建了一个表单字段，我想验证我的URL，但它不起作用。我尝试使用电子邮件，它正在工作。我还希望在输入有效的URL之前禁用该按钮：

这是我的代码：

export class StartComponent implements OnInit {
  searchValue: string;
  url: any;
  public reg = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;

  constructor() {  }
  ngOnInit() {
    this.url = new FormControl('', [Validators.required, Validators.pattern(this.reg)]);
    this.getErrorMessage();
  }
  getErrorMessage() {
    return this.url.hasError('required') ? 'You must enter a value' :
        this.url.hasError('email') ? 'Not a valid url' :
            '';
  }
}

HTML

<mat-card class="searchbox">
    <mat-form-field>
        <input matInput placeholder="Enter your url" [formControl]="url" required>
        <mat-error *ngIf="url.invalid">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
    <!--Here button should be disabled if url not valid and until there is something entered-->
    <button mat-stroked-button color="warn">GO</button>
</mat-card>

Here是stackblitz上的应用程序

Answer 1

尝试这样：

DEMO

<mat-card class="searchbox">
    <mat-form-field>
        <input (focus)="markTouched()" matInput placeholder="Enter your url" [formControl]="url" required>
        <mat-error *ngIf="url.hasError('required')">
      Url required
    </mat-error>
    <mat-error *ngIf="url.hasError('pattern')">
      Url Pattern Invalid
    </mat-error>
    </mat-form-field>
    <!--Here button should be disabled if url not valid and until there is something entered-->

    <button [disabled]="url.invalid" mat-stroked-button color="warn">GO</button>
</mat-card>

{{url.errors | json}}

TS：

public myreg = /(^|\s)((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/gi

  url = new FormControl('', [Validators.required, Validators.pattern(this.myreg)]);

 markTouched() {
    this.url.markAsTouched();
    this.url.updateValueAndValidity();
  }

Answer 2

HTML

<mat-error *ngIf="form.get('url').hasError('pattern')">Invalid URL format</mat-error>

TS

ngOnInit(): void {
    this.form = this.formBuilder.group({url: [null, [Validators.required, YourComponent.urlValidator});
}

private static urlValidator({value}: AbstractControl): null | ValidationErrors {
    try {
       new URL(value);
       return null;
    } catch {
       return {pattern: true};
    }
}

您只需使用内置的URL API https://developer.mozilla.org/en-US/docs/Web/API/URL 即可对其进行验证。
urlValidator 如果提供的控件的 url 值有效，则方法返回 null，否则返回 'pattern' 错误。

Angular Material URL验证与模式

2 个答案: