angular-form-training/src/app/components/contact-form/contact-form.component.html at fc4845e7a567d9c3658b731884e9efd6f1711f0b · angularmrTraining/angular-form-training · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="row">
  <div class="col-sm-8 col-md-12">
    <h2 class="text-center">
      Exploring the form validation with Angular 5
    </h2>

    <div class="card" [hidden]="submitted">
      <div class="card-header">
        Create a New Contact
      </div>
      <div class="card-body">
        <form #contactForm="ngForm" (ngSubmit)="onSubmit()">
          <!-- FirstName, LastName and MiddleName -->
          <div class="form-group">
            <div class="row">
              <div class="col">
                <label for="">First Name</label>
                <input type="text" class="form-control" id="firstName" required [(ngModel)]="model.firstName" name="firstName" #firstName="ngModel">
                <div [hidden]="firstName.valid || firstName.pristine" class="alet alert-danger">
                  First name is required!!
                </div>
              </div>
              <div class="col">
                <label for="">Middle Name</label>
                <input type="text" class="form-control" id="middleName" [(ngModel)]="model.middleName" name="middleName">
              </div>
              <div class="col">
                <label for="">Last Name</label>
                <input type="text" class="form-control" id="lastName" required [(ngModel)]="model.lastName" name="lastName" #lastName="ngModel">
                <div [hidden]="lastName.valid || lastName.pristine" class="alet alert-danger">
                  Last name is required!!
                </div>
              </div>
            </div>
          </div>
          <div class="form-groupe">
            <div class="row">
              <div class="col">
                <label for="">Email</label>
                <input type="email" class="form-control" id="email" required email [(ngModel)]="model.email" name="email" #email="ngModel">
                <div [hidden]="email.valid || email.pristine" class="alet alert-danger">
                  Must be a valid Email
                </div>
              </div>
              <div class="col">
                <label for="">Phone</label>
                <input type="text" class="form-control" id="phone" required [(ngModel)]="model.phone" name="phone" #phone="ngModel">
                <div [hidden]="phone.valid || phone.pristine" class="alet alert-danger">
                  Phone number is required!!
                </div>
              </div>
              <div class="col">
                <label for="">Gender</label>
                <select name="" id="gender" class="form-control" required name="gender" [(ngModel)]="model.gender">
                  <option *ngFor="let gender of genders" [value]="gender">{{gender}}</option>
                </select>
              </div>
            </div>
          </div>
          <!-- /FirstName, LastName and MiddleName -->
          <div class="form-group">
            <app-contact-address [address]="model.address"></app-contact-address>
          </div>
          <!-- Role -->
          <div class="form-group">
            <label for="">User Role</label>
            <select name="" id="role" class="form-control" required name="role" [(ngModel)]="model.role">
              <option *ngFor="let role of roles" [value]="role">{{role}}</option>
            </select>
          </div>
          <!-- /Role -->
        </form>
      </div>

      <!-- Card Footer -->
      <div class="card-footer">
        <button class="btn btn-warning" (click)="newContact(); contactForm.reset()">
          New Contact
        </button>
        <button class="btn btn-success" [disabled]="!contactForm.form.valid" (click)="onSubmit()">
          Submit
        </button>
      </div>
    </div>

    <div class="card" [hidden]="!submitted">
      <div class="card-body">
        <div class="alert alert-success" role="alert">
          Your contact has been Added!
        </div>
      </div>
      <div class="card-footer">
        <button class="btn btn-warning" (click)="submitted = false;contactForm.reset()">
          Go back to the form
        </button>
      </div>
    </div>
  </div>
</div>