5 views

HTML5 Field Validation in Angular

bipon68Angular

HTML 5 Validation Attributes

  • required
  • pattern
  • minlength
  • maxlength
  • min
  • max

Step 1: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control"  required />
        <button class="btn btn-primary">Send</button>
     </div>
</form>

Step 2: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control"  pattern="B.*" />
   <div>
    <button class="btn btn-primary">Send</button>
</form>

Step 3: user-settings-form.component.html file 

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control"  minlength="3" />
   <div>
    <button class="btn btn-primary">Send</button>
</form>

Step 4: user-settings-form.component.html file 

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" type="number" min="3" max="300" />
   <div>
    <button class="btn btn-primary">Send</button>
</form>

Leave a Reply