<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

<custom-input
    required
    minlength="4"
    [(ngModel)]="hero.name"
/>

<ui-input-email 
    label="Email" 
    required 
    [(ngModel)]="login.email" 
/>

<ui-input-password 
    label="Password" 
    required 
    [pattern]="passwordPattern" 
    [(ngModel)]="login.password" 
/>

<button>Login</button>

class Input {
    // some methods and props here
}

window.customElements.define('ui-input', Input)

<ui-input required />

const input = document.createElement('ui-input')
input.setAttribute('required, true)

import {Input} from 'ui-components'

const input = new Input()
input.required = true