Video 30 | Use Template Driven Forms in Angular

.ts

  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }

login.component.html

<div class="row">
    <div class="col-md-6 offset-md-3 mt-4">
        <h3>Login</h3>
        <form #f="ngForm"
              (ngSubmit)="onSubmit(f)">
            <div class="form-group">
                <label for="loginUsername">Username</label>
                <input type="text"
                       name="username"
                       ngModel
                       required
                       #username="ngModel"
                       class="form-control"
                       id="loginUsername"
                       placeholder="Enter username">
            </div>
            <div class="form-group">
                <label for="loginPassword">Password</label>
                <input type="password"
                       name="password"
                       ngModel
                       required
                       #password="ngModel"
                       class="form-control"
                       id="loginPassword"
                       placeholder="Password">
            </div>
            <div class="form-group form-check">
                <a [routerLink]="['/reset-password']">Forgot Password</a>
            </div>
            <button type="submit"
                    [disabled]="f.invalid"
                    class="btn btn-primary">Login <i class="fas fa-sign-in-alt"></i></button>
        </form>
    </div>
</div>

register.component.html

<div class="row">
    <div class="col-md-6 offset-md-3 mt-4">
        <h3>Register New Employer</h3>
        <form #f="ngForm"
              (ngSubmit)="onSubmit(f)">
            <div class="form-group">
                <label for="registerUsername">Username</label>
                <input type="text"
                       name="username"
                       ngModel
                       required
                       #username="ngModel"
                       class="form-control"
                       id="registerUsername"
                       placeholder="Enter username">
            </div>
            <div class="form-group">
                <label for="registerEmail">Email</label>
                <input type="email"
                       name="email"
                       ngModel
                       required
                       #email="ngModel"
                       class="form-control"
                       id="registerEmail"
                       placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="registerPassword">Password</label>
                <input type="password"
                       name="password"
                       ngModel
                       required
                       #password="ngModel"
                       class="form-control"
                       id="registerPassword"
                       placeholder="Password">
            </div>
            <button type="submit"
                    [disabled]="f.invalid"
                    class="btn btn-primary">Register <i class="fas fa-sign-in-alt"></i></button>
        </form>
    </div>
</div>

reset-password.component.html

<div class="row">
    <div class="col-md-6 offset-md-3 mt-4">
        <h3>Reset Password</h3>
        <form #f="ngForm"
              (ngSubmit)="onSubmit(f)">

            <div class="form-group">
                <label for="resetPasswordEmail">Account Email</label>
                <input type="email"
                       name="email"
                       ngModel
                       required
                       #email="ngModel"
                       class="form-control"
                       id="resetPasswordEmail"
                       placeholder="Enter email">
            </div>

            <button type="submit"
                    [disabled]="f.invalid"
                    class="btn btn-primary">Reset Password <i class="fas fa-paper-plane"></i></button>
        </form>
    </div>
</div>

style.scss

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}