Angolare 2: Semplice convalida dell’input

Ho un input semplice, che è pensato per un numero di telefono e vorrei confermare che non ci sono solo i numeri e che la lunghezza è di 10 cifre.

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

Cosa posso fare per convalidare questo senza l’utilizzo di FormBuilder? Sembra che FormBuilder solo complica le cose e vorrei solo per convalidare questo ingresso.

  • Siete ancora alla ricerca di un soggiorno con un modello guidato forma?
  • Mi sembrava più semplice e sono nuovo di Angular2
  • Sto cercando angolare modo di avvicinarsi a questa
InformationsquelleAutor Jeremy Thomas | 2017-04-18



4 Replies
  1. 5

    Con il costruito nel modello validator è molto facile:

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

    HTML:

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

    è possibile utilizzare numero del tipo e max

    • Non che limitano il numero compreso tra 1 e 10? Penso che l’OP vuole tra 1 e 10 cifre.
    • ^ che è corretto
  3. 2

    Ecco un esempio dal mio Pluralsight corso. Questo primo esempio è l’utilizzo di Template-driven forme. Si utilizza un modello semplice, per convalidare l’indirizzo di posta elettronica:

                <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._%+-][email protected][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>

    Questo esempio utilizza Forme Reattive per la stessa cosa.

        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._%+-][email protected][a-z0-9.-]+')]],
            sendCatalog: true
        });

    Quindi, utilizzando un pattern è molto più di un Angolare tecnica. Ero solo indicare il sito in HTML, in quanto ha fornito alcuni suggerimenti per il numero di telefono di modelli che si poteva scegliere e utilizzare al posto della e-mail mostrato negli esempi qui.

    Fatemi sapere se si desidera che il link associato github il codice.

Lascia un commento