-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
69 lines (69 loc) · 3.38 KB
/
form.html
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
<form name="ctrl.form" ng-submit="ctrl.save()" novalidate>
<div class="form-group" ng-class="{ 'has-error': ctrl.form.firstname.$touched && ctrl.form.firstname.$invalid }">
<label>First Name *</label>
<input type="text" name="firstname" class="form-control text-capitalize"
ng-model="ctrl.formData.firstname"
ng-minlength="3"
ng-maxlength="15"
ng-pattern="/^[a-zA-Z]*$/"
required>
<div class="help-block" ng-messages="ctrl.form.firstname.$error" ng-if="ctrl.form.firstname.$touched" ng-cloak>
<p ng-message="pattern">First name must be letters only.</p>
<p ng-message="minlength">Your first name is too short.</p>
<p ng-message="maxlength">Your first name is too long.</p>
<p ng-message="required">First name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': ctrl.form.lastname.$touched && ctrl.form.lastname.$invalid }">
<label>Last Name *</label>
<input type="text" name="lastname" class="form-control text-capitalize"
ng-model="ctrl.formData.lastname"
ng-minlength="3"
ng-maxlength="15"
ng-pattern="/^[a-zA-Z]*$/"
required>
<div class="help-block" ng-messages="ctrl.form.lastname.$error" ng-if="ctrl.form.lastname.$touched" ng-cloak>
<p ng-message="pattern">Last name must be letters only.</p>
<p ng-message="minlength">Your last name is too short.</p>
<p ng-message="maxlength">Your last name is too long.</p>
<p ng-message="required">Last name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': ctrl.form.phone.$touched && ctrl.form.phone.$invalid }">
<label>Phone *</label>
<input type="text" name="phone" class="form-control"
ng-model="ctrl.formData.phone"
ng-pattern="ctrl.pattern"
required>
<div class="help-block" ng-messages="ctrl.form.phone.$error" ng-if="ctrl.form.phone.$touched" ng-cloak>
<p ng-message="pattern">Please enter a valid phone number.</p>
<p ng-message="required">Phone number is required.</p>
</div>
</div>
<div class="form-group">
<label>Gender *</label>
<div class="radio">
<label>
<input type="radio" name="gender" value="male" ng-model="ctrl.formData.gender" required>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" ng-model="ctrl.formData.gender">
Female
</label>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': ctrl.form.age.$touched && ctrl.form.age.$invalid }">
<label>Age *</label>
<input type="number" name="age" min="12" max="99" class="form-control"
ng-model="ctrl.formData.age"
required>
<div class="help-block" ng-messages="ctrl.form.age.$error" ng-if="ctrl.form.age.$touched" ng-cloak>
<p ng-message="min">Age should be at least 12</p>
<p ng-message="required">Age is required.</p>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.form.$invalid">Sumbit</button>
</form>