TextBin - Compartilhe Códigos e Textos Online

Novo Texto Importar Arquivo

<div class="container">
  <h1>Registration Form</h1>
  <form [formGroup]="registerForm" (ngSubmit)="SubmitForm(registerForm)">
    <div class="form-group">
      <label>First name</label>
      <input type="text" class="form-control" formControlName="fName">
      <p *ngIf="registerForm.controls.fName.errors?.required &&  registerForm.controls.fName.touched"
        class="alert alert-danger">This field is required!</p>
      <p *ngIf="registerForm.controls.fName.errors?.pattern &&  registerForm.controls.fName.touched"
        class="alert alert-danger">
        Please enter valid First name.
      </p>
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" class="form-control" formControlName="lName">
      <p *ngIf="registerForm.controls.lName.errors?.required &&  registerForm.controls.lName.touched"
        class="alert alert-danger">This field is required!</p>
      <p *ngIf="registerForm.controls.lName.errors?.pattern &&  registerForm.controls.lName.touched"
        class="alert alert-danger">
        Please enter valid Last name.
      </p>
    </div>

<label>EmailID</label>
      <input type="text" class="form-control" formControlName="emailId">
      <p *ngIf="registerForm.controls.emailId.errors?.required &&  registerForm.controls.emailId.touched"
        class="alert alert-danger">This field is required!</p>
      <p *ngIf="registerForm.controls.emailId.errors?.pattern &&  registerForm.controls.emailId.touched"
        class="alert alert-danger">
        Email id is not entered in proper format
      </p>

</div>
    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password">
      <p *ngIf="registerForm.controls.password.errors?.required &&  registerForm.controls.password.touched"
        class="alert alert-danger">This field is required!</p>
      <p *ngIf="registerForm.controls.password.errors?.minlength &&  registerForm.controls.password.touched"
        class="alert alert-danger">Minimum 8 Characters Required</p>
      <p *ngIf="registerForm.controls.password.errors?.maxlength &&  registerForm.controls.password.touched"
        class="alert alert-danger">Maximum 16 Characters Allowed</p>
    </div>
    <div class="form-group">
      <label>Confirm Password</label>
      <input type="password" class="form-control" formControlName="cPassword">
      <p *ngIf="registerForm.controls.cPassword.errors?.required &&  registerForm.controls.cPassword.touched"
      class="alert alert-danger">This field is required!</p>
    </div>
    <div class="form-group">
      <label>Gender</label>
      <input type="radio" formControlName="gender" name="gender" value="M" id="M" />
      <label for="M">Male</label>
      <input type="radio" formControlName="gender" name="gender" value="F" id="F" />
      <label for="F">Female</label>
    </div>
    <div *ngIf="registerForm.controls.gender.invalid && registerForm.controls.gender.touched"
      class="alert alert-danger">
      Gender required.
    </div>

<div class="form-group">
      <label>Contact Number</label>
      <input type="text" class="form-control" formControlName="mobile">
      <p *ngIf="registerForm.controls.mobile.errors?.required &&  registerForm.controls.mobile.touched"
      class="alert alert-danger">This field is required!</p>
      <p *ngIf="registerForm.controls.mobile.errors?.pattern &&  registerForm.controls.mobile.touched"
      class="alert alert-danger">
      Enter Valid Contact Information.
    </p>
    </div>
    <div class="form-group">
      <label>Date of Birth</label>
      <input type="date" class="form-control" formControlName="dateOfbirth">
      <p *ngIf="registerForm.controls.dateOfbirth.errors?.dateError &&  registerForm.controls.dateOfbirth.touched"
        class="alert alert-danger">{{registerForm.controls.dateOfbirth.errors?.dateError.message}}</p>
    </div>
    <div class="form-group">
      <label>Address</label>
      <input type="text" class="form-control" formControlName="address">
      <p *ngIf="registerForm.controls.address.errors?.required &&  registerForm.controls.address.touched"
        class="alert alert-danger">This field is required!</p>
        <p *ngIf="registerForm.controls.address.errors?.pattern &&  registerForm.controls.address.touched"
        class="alert alert-danger">
        Enter Valid Address Information.
      </p>
    </div>
    <button type="submit" [disabled]="!registerForm.valid">Register User</button>
  </form>
  <div>
    {{msg}}
  </div>
  <br />
</div>

Configurações do Texto

Título do Texto : [Opcional]

Guardar na Pasta : [Opcional]

Syntax Highlighting : [Opcional]

Expiração do Texto : [Opcional]

Status do Texto : [Opcional]

Senha : [Opcional]

Descrição: [Opcional]

Tags: [Opcional]

Criptografar Texto (?)

No momento você não está logado, isso significa que você não pode editar ou excluir nada que você poste. Cadastre-se ou faça o Login

Configurações do Texto

Idiomas do site