一般來說前端介面少不了一兩個輸入框，這篇說說輸入框字型長度限制的問題
準備工作
1、安裝模組

npm install ng2-validation –save


2、配置*.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {CustomFormsModule} from "ng2-validation";
...
imports: [
    FormsModule,
    CustomFormsModule,
    ReactiveFormsModule
  ],
...
 

方式一、這個需要對應上 ，第一個input那些繫結需要和ts對應，之後是邏輯判斷 ! ngif
html

 <div class="col-md-12 search">
  <form #myForm="ngForm">
    <div>
      <input type="text" [(ngModel)]="form.field" name="field" #field="ngModel" [rangeLength]="[0, 30]"
        class="form-control" required  placeholder
 
="可以輸入課程名稱、上課時間、授課老師、學分進行檢視（少於30字）"/>

      <input type="button" [disabled]="!myForm.form.valid" class="btn btn-primary" (click)="query($event)" value="查詢">     

      <div class="text-danger" *ngIf="field.errors?.rangeLength">輸入字元長度在0-30之間</div>

    </div>
  </form>
</div
 
> 

ts

import {FormControlName, FormControl, FormGroup, FormArray,NgForm,FormBuilder,Validators} from "@angular/forms";
// 2. 引入ng2-validation中的元件
import {CustomValidators} from 'ng2-validation';

 // 3. 定義表單組
form:FormGroup;

constructor(private router:Router,private confirmService: ConfirmationService) { 
    let fb=new FormBuilder();
    this.form = fb.group({
      // 定義form.field 是一個區間
      field: new FormControl('', CustomValidators.range([0, 30]))
    });   }

方式二、這個對應關係少了一點，不過還是要注意的，這個邏輯判斷hidden加了一些複雜性。

html

<div class="col-md-12 search">
    <form [formGroup]="formModel" novalidate>
      <div class="form-group" [class.has-error]="formModel.hasError('minlength','title') && formModel.hasError('maxlength','title') " >
        <input formControlName="title" type="text" class="form-control" 
          placeholder="可以輸入課程名稱、上課時間、授課老師、學分進行檢視（少於30字）"/>
          <!--這個是提交按鈕,如果條件不滿足, 提價按鈕為只讀-->
          <input type="button" [disabled]="!formModel.valid" class="btn btn-primary" (click)="query($event)" value="查詢">     

          <div [hidden]=" formModel.get('title').untouched &&  (!formModel.hasError('minlength','title') && !formModel.hasError('maxlength','title')) "> 請輸入至少1-30個字</div>

      </div>
    </form>
  </div>

ts

 formModel:FormGroup;
  constructor(private router:Router,private confirmService: ConfirmationService) { 
    let fb=new FormBuilder();
    this.formModel = fb.group({
      title:['',[Validators.required,Validators.minLength(1),Validators.maxLength(30)]]
    })
  }