Angular 2: Einfache Eingabevalidierung

Question

Ich habe eine einfache Eingabe, die für eine Telefonnummer gedacht ist, und ich möchte bestätigen, dass es nur Zahlen gibt und dass die Länge 10 Ziffern lang ist.

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

Was kann ich dieses FormBuilder ohne zu validieren tun? Es scheint wie FormBuilder nur Dinge kompliziert, und ich möchte nur diesen einen Eingang validieren.

Answer 1

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

können Sie Typennummer verwenden und max

Answer 2

Hier ist ein Beispiel aus meinem Plural Kurs. In diesem ersten Beispiel werden vorlagengesteuerte Formulare verwendet. Es verwendet ein einfaches Muster, um die E-Mail-Adresse zu überprüfen:

  <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> 

Dieses Beispiel verwendet reaktive Formulare für die gleiche Sache.

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 
    }); 

Also ein Muster zu verwenden ist sehr eine Angular-Technik. Ich habe Sie nur auf die HTML-Seite verwiesen, da sie mehrere Vorschläge für Telefonnummernmuster enthielt, die Sie anstelle der in meinen Beispielen hier gezeigten E-Mail-Muster verwenden könnten.

Lassen Sie mich wissen, wenn Sie den Link zum zugehörigen GitHub-Code möchten.

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

Mit dem in Muster-Validator gebaut ist es sehr einfach:

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