juplo.de Git - demos/kafka/chat/blob - src/app/user/user.component.html

   1 <div class="panel panel-primary">
   2   <div class="panel-heading">
   3     <h3 class="panel-title">Please pick a Username</h3>
   4   </div>
   5   <div class="panel-body form-inline">
   6     <div class="form-group">
   7       <div class="input-group input-group-primary">
   8         <label for="name" class="input-group-addon">Username</label>
   9         <input id="name" type="text" class="form-control" placeholder="Enter your username" [formControl]="usernameForm">
  10       </div>
  11       <div *ngIf="usernameForm.invalid && (usernameForm.dirty || usernameForm.touched)"
  12            class="alert alert-danger">
  13
  14         <div *ngIf="usernameForm.errors?.['required']">
  15           Name is required.
  16         </div>
  17         <div *ngIf="usernameForm.hasError('whitespace')">The username must not be empty</div>
  18       </div>
  19     </div>
  20     <button type="submit" class="btn btn-primary" (click)="updateName()" [disabled]="usernameForm.invalid">Pick Name</button>
  21   </div>
  22 </div>
  23 <p>Value: {{ usernameForm.value }}</p>
  24 <p>Form Status: {{ usernameForm.status }}</p>