DemoSampleProject/index.html at master · crampete/DemoSampleProject · 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
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html ng-app="formvalidation">

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <script type="text/ng-template" id="form-template">
    <form ng-submit="mainVm.addPerson(userForm.$valid)" name="userForm" novalidate>
      <h1>Angular1 Form validation</h1>
      <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" placeholder="Enter name" ng-model="mainVm.newPerson.name" required>
        <div ng-messages="userForm.name.$error" class="has-error" ng-if="userForm.name.$dirty">
          <p ng-message="required">Name is required</p>
        </div>
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" name="email" class="form-control" placeholder="Email" ng-model="mainVm.newPerson.email" required>
        <div ng-messages="userForm.email.$error" class="has-error" ng-if="userForm.email.$dirty">
          <p ng-message="required">Email is required</p>
          <p ng-message="email">Email is invalid</p>
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
          <input type="password" class="form-control pass" name="password" ng-model="mainVm.newPerson.password"  placeholder="Password" ng-minlength="6" required/>
          <div ng-messages="userForm.password.$error" class="has-error" ng-if="userForm.password.$dirty">
            <p ng-message="required">Password is required</p>
            <p ng-message="minlength">Password should be at least 6 digit length</p>
          </div>
      </div>

       <div class="form-group">
        <label>Confirm Password</label>
          <input type="password" class="form-control" name="confirm_password" ng-model="mainVm.newPerson.confirm_password" placeholder="Confirm Password" ng-minlength="6" required/>
          <div ng-messages="userForm.confirm_password.$error" class="has-error" ng-if="userForm.confirm_password.$dirty">
            <p ng-message="required">Fill confirm password</p>
            <p ng-message="minlength">It should be at least 6 digit length</p>
          </div>
          <span style="color:red" ng-show="mainVm.newPerson.password != mainVm.newPerson.confirm_password">Your passwords must match.</span>
          </div>

      <div class="form-group">
        <label>City</label>
        <input type="text" name="city" class="form-control" placeholder="City" ng-model="mainVm.newPerson.address.city" required>
        <div ng-messages="userForm.city.$error" class="has-error" ng-if="userForm.city.$dirty">
          <p ng-message="required">City is required</p>
        </div>
      </div>
      <div class="form-group">
        <label>ZipCode</label>
        <input type="text" name="zip" class="form-control" placeholder="ZipCode" ng-model="mainVm.newPerson.address.zip" required ng-pattern="/^[0-9]{6}$/">
        <div ng-messages="userForm.zip.$error" class="has-error" ng-if="userForm.zip.$dirty">
          <p ng-message="required">Zip is required</p>
          <p ng-message="pattern">Zip must have 6 digits</p>
        </div>
      </div>
      <div class="form-group">
          <label>Choose type</label>
          <select class="form-control" name="selecttype" ng-model="mainVm.newPerson.selecttype" required />
            <option value="">choose</option>
            <option>normal</option>
            <option>standard</option>
          </select>
          <div ng-messages="userForm.selecttype.$error" class="has-error" ng-if="userForm.selecttype.$dirty">
            <p ng-message="required">Zip is required</p>
            </div>
        </div>

      <div class="form-group">
        <label>Company</label>
        <input type="text" name="company" class="form-control" placeholder="Company" ng-model="mainVm.newPerson.company.name" required minlength="5">
        <div ng-messages="userForm.company.$error" class="has-error" ng-if="userForm.company.$dirty">
        <p ng-message="required">Company is required</p>
        <p ng-message="minlength">Company must be less than 5 letters></p>
        </div>
      </div>
      <button type="submit" class="btn btn-success" ng-disabled="userForm.$invalid">Submit</button>

    </form>

  </script>
</head>

<body>
  <div class="container" ng-controller="MainController as mainVm">

    <div class="row">
      <div class="col-md-6" ng-include="'form-template'">


      </div>
      <br>

    </div>
  </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.2/angular-messages.min.js"></script>
  <script src="script.js"></script>
</body>

</html>