带有图案的角度材料 url 验证

Question

Helo，

我正在使用角度材料，我创建了一个表单字段，我想验证我的 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>

这是堆栈闪电战的应用程序

Answer 1

尝试如下：

演示

<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 APIhttps://developer.mozilla.org/en-US/docs/Web/API/URL 对其进行验证即可。
如果提供的控件的 url 值有效，则urlValidator方法返回 null，否则返回"模式"错误。