角2：単純な入力検証

Question

私は電話番号のための単純な入力を持っています。私は数字だけで長さが10桁であることを検証したいと思います。

<input [(ngModel)]="client.phone" class="form-input" name="phone" type="phone" [value]="client.phone"> 

FormBuilderを使用せずにこれを検証するにはどうすればよいですか？ FormBuilderのように思えば、この1つの入力を検証するだけです。

Answer 1

<input type="number" name="phone" max="10">

あなたはここで種類数と最大

Answer 2

を使用することができます私のPluralsightのコースからの例です。この最初の例では、テンプレート駆動フォームを使用しています。電子メールアドレスの検証には単純なパターンを使用しています。

  <div class="form-group" 
       [ngClass]="{'has-error': (emailVar.touched || emailVar.dirty) && !emailVar.valid }"> 
       <label class="col-md-2 control-label" 
        for="emailId">Email</label> 

       <div class="col-md-8"> 
        <input class="form-control" 
          id="emailId" 
          type="email" 
          placeholder="Email (required)" 
          required 
          pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+" 
          [(ngModel)]="customer.email" 
          name="email" 
          #emailVar="ngModel" /> 
        <span class="help-block" *ngIf="(emailVar.touched || emailVar.dirty) && emailVar.errors"> 
         <span *ngIf="emailVar.errors.required"> 
          Please enter your email address. 
         </span> 
         <span *ngIf="emailVar.errors.pattern"> 
          Please enter a valid email address. 
         </span> 

         <!-- This one does not work --> 
         <span *ngIf="emailVar.errors.email"> 
          Please enter a valid email address. 
         </span> 
        </span> 
       </div> 
      </div> 

この例では、同じものに対して反応的なフォームを使用しています。

this.customerForm = this.fb.group({ 
     firstName: ['', [Validators.required, Validators.minLength(3)]], 
     lastName: ['', [Validators.required, Validators.maxLength(50)]], 
     email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+')]], 
     sendCatalog: true 
    }); 

したがって、パターンを使用することは非常に角度の技法です。私はここで私の例で示されている電子メールパターンの代わりに選ぶことができる電話番号パターンのためのいくつかの提案を提供したので、HTMLサイトにあなたを指摘していました。

関連するgithubコードへのリンクを希望する場合はお知らせください。パターンのバリデータを内蔵した

Answer 3

https://angular.io/docs/ts/latest/guide/forms.html

<form role="form" #f="ngForm" novalidate> 
    <input class="form-input" type="number" [(ngModel)]="client.phone" name="phone" max="10"> 
    <button type="submit" [disabled]="f.form.invalid"> 
</form> 

Answer 4

それは非常に簡単です：

<input [(ngModel)]="client.phone" pattern="[0-9]{10}" class="form-input" name="phone" type="phone" [value]="client.phone">