Как сделать обязательное поле ввода URL в угловых?

Question

Здесь у меня есть одно поле ввода, которое я хочу сделать обязательным для ввода URL-полем, и я сделал этот код. Когда я помещаю URL-адрес в поле ввода или помещаю любое другое поле ввода только для текста, в обоих случаях оно сохраняет поле ввода и сохраняет в базе данных. , Итак, как сделать обязательное поле ввода типа url в угловых 6.

<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

попробуйте добавить disabled в кнопку отправки формы, и вы уже используете поле required in input, так что теперь оно будет работать

 <form method="post" enctype="multipart/form-data" #ngForm="formName">
    <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()" [disabled]="!formName.form.valid">SEND NOTIFICATION</button>  

    </form>

для более подробной информации смотрите здесь в угловых документах

Answer 2

Вы сделали несколько обязательных действий, чтобы работать с ngForm в том виде, как он был спроектирован.

Пожалуйста, посмотрите это руководство: https://www.concretepage.com/angular-2/angular-2-ngform-with-ngmodel-directive-example

Это основные ключи:

• Используйте ngForm в теге формы
• используйте ngSubmit вместо кнопки (щелчка), потому что это обходит форму

Answer 3

При нажатии кнопки «sendNotification ()» вы не проверяете проверку. Есть много способов заблокировать вызов метода при проверке. Найдите ниже пример кода.

  <button mat-raised-button [disabled]="largeicon.errors && (largeicon.errors.required || largeicon.errors.pattern)" (click)="sendNotification()">SEND NOTIFICATION</button>  

Приведенный выше код отключит кнопку при сбое проверки.

Answer 4

ваш шаблон должен быть

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

или в функции отправки формы для проверки значения регулярного выражения, если оно соответствует, тогда true в противном случае false

this fiddle поможет вамлучше понять