Angular4_表單，驗證

使用的是模板驅動表單

這是增刪改查效果圖

<form (ngSubmit)="onSubmit()" #addEditWorkStationForm="ngForm">
            <div class="form-group">
                <label for="name">Make Workstation Code</label>
                <input type="text" class="form-control" id="name" [disabled]="isEdit" autofocus required [(ngModel)]="model.makeWorkstationCode" name="makeWorkstationCode" #makeWorkstationCode="ngModel">
                <div [hidden]="makeWorkstationCode.valid || makeWorkstationCode.pristine" class="alert alert-danger">
                    Make Workstation Code is required
                </div>
                <div [hidden]="hasStationCode" class="alert alert-danger">
                    The Make Workstation Code already exists
                </div>
            </div>
            <div class="form-group">
                <label for="lanceCode">Production Group</label>
                <angular2-multiselect [data]="lanceCodes" id="lanceCode" [(ngModel)]="selectedItems" [settings]="settings" name="lanceCode"
                    #lanceCode="ngModel" required>
                </angular2-multiselect>
                <div [hidden]="lanceCode.valid || lanceCode.pristine" class="alert alert-danger">
                    <div [hidden]="!lanceCode.hasError('required')">Production Group is required</div>
                </div>
            </div>
            <div class="form-group">
                <label for="name">Display Code</label>
                <input type="text" class="form-control" id="displayCode" required [(ngModel)]="model.displayCode" name="displayCode"
                    #displayCode="ngModel">
                <div [hidden]="displayCode.valid || displayCode.pristine" class="alert alert-danger">
                    Display Code is required
                </div>
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <input type="text" class="form-control" id="description" [(ngModel)]="model.description" name="description">
            </div>
            <div class="form-group">
                <label for="productionCode">Work Center Type</label>
                <select class="form-control" id="productionCode" required [(ngModel)]="model.productionCode" name="productionCode" #productionCode="ngModel">
                    <option *ngFor="let code of productionCodes" [value]="code.value">{{code.key}}</option>
                </select>
                <div [hidden]="productionCode.valid || productionCode.pristine" class="alert alert-danger">
                     Production Code is required
                </div>
            </div>
            <div class="checkbox">
                <label class="center-block">
                    <input type="checkbox" [(ngModel)]="model.isPersistent" name='isPersistent' id='isPersistent' (change)='persistentChange(model)'> IsPersistent
                </label>
            </div>
            <div class="form-group" [hidden]="model.isPersistent">
                <label for="idletimeout">IdleTimeOut</label>
                <input type="text" class="form-control" id="idletimeout"  [(ngModel)]="model.idleTimeout" [required]="!model.isPersistent" name="idleTimeout" value='60' #idletimeout="ngModel">
                <div [hidden]="idletimeout.valid || idletimeout.pristine" class="alert alert-danger">
                     IdleTimeOut is required
                </div>
            </div>
            <button type="submit" class="btn btn-success" [disabled]="!addEditWorkStationForm.form.valid">Submit</button>
            <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
        </form>