How to make mandatory url input field in angular?

Question

Here I have one input field that I want to make mandatory url input field and I done this code.when I put url in input field or put any other text only input field in both case it saves input field and save in database. so, how to make mandatory url type input field in angular 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>

may be this will help you stackoverflow.com/questions/50508712/… — Hitesh Kansagara
– Hitesh Kansagara, Commented Sep 12, 2018 at 5:27

ojesh singh · Accepted Answer · 2018-09-12 05:43:07Z

1

On Button click "sendNotification()" you are not checking the validation. There are many ways to block the method call on validation. Find below sample code.

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

Above code will disable button when validation failed.

answered Sep 12, 2018 at 5:43

ojesh singh

652 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hrishikesh Kale · Accepted Answer · 2018-09-12 05:28:10Z

1

your pattern should be

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

or else on form submit function to check the regex value if matched then true else false

this fiddle will help you to understand better

answered Sep 12, 2018 at 5:28

Hrishikesh Kale

6,6484 gold badges20 silver badges30 bronze badges

1 Comment

amphetamachine Over a year ago

You don't need ` inside of character classes unless it's to escape [` or ], and {0,1} is more concisely written as ?. Also, the TLD regex is wrong; it will reject .co.uk domains, for instance.

JohnnyDevNull · Accepted Answer · 2018-09-12 05:28:12Z

0

You have done some mandatory things wrong to work with ngForm in the way as it is designed.

Please take a look at this guide: https://www.concretepage.com/angular-2/angular-2-ngform-with-ngmodel-directive-example

These are the major keys:

Use ngForm at the form tag
use ngSubmit instead of an (click) button, because that bypasses the form

answered Sep 12, 2018 at 5:28

JohnnyDevNull

9841 gold badge8 silver badges22 bronze badges

Comments

Ganesh · Accepted Answer · 2018-09-12 05:55:56Z

try to add disabled in your form submit button and your already using the required in input field so,it will work now

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

for more details look here in angular docs

Collectives™ on Stack Overflow

How to make mandatory url input field in angular?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related