Question

在这里我有一个输入字段，我想将其设置为必填url输入字段，并完成了这段代码。当我将url放在输入字段中或将任何其他纯文本输入字段都放在这两种情况下，它将保存输入字段并保存在数据库中。因此，如何在角度6中设置必填的url类型输入字段。

<form method="post" enctype="multipart/form-data">
<mat-form-field>
  <input matInput type="url" pattern="https?://.+" placeholder="Large Icon" name="largeicon" #largeicon="ngModel"
           [(ngModel)]="notificationObj.largeicon" required>
</mat-form-field>

<div *ngIf="largeicon.errors && (largeicon.dirty || largeicon.touched)" class="alert alert-danger">
  <div [hidden]="!largeicon.errors.required">URL is required!</div>
  <div [hidden]="!largeicon.errors.pattern">Must be a valid URL!</div>
</div>
  <button mat-raised-button (click)="sendNotification()">SEND NOTIFICATION</button>  

</form>

Answer 1

您的模式应为

pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/"

否则在表单提交功能上检查匹配的正则表达式值，然后为true否则为false

此fiddle将帮助您更好地了解

Answer 2

按照ngForm的设计方式，您已经做了一些强制性的错误操作。

请查看以下指南：https://www.concretepage.com/angular-2/angular-2-ngform-with-ngmodel-directive-example

这些是主要键：

在表单标签上使用ngForm
使用ngSubmit代替（单击）按钮，因为这会绕过表单

如何使角度的强制性URL输入字段？

2 个答案: