Überprüfen, ob ein Angular2 form gültig ist oder nicht innerhalb der Komponente

Ich versuche zu prüfen, ob ein Formular gültig ist oder nicht, verhindern die weitere Ausführung, wenn es nicht ist.

Hier ist mein Fragebogen:

<form (ngSubmit)="updateFirstName(firstNameForm)" #firstNameForm="ngForm" novalidate>
    <div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
        <div class="input-group">
            <input type="text"
                   ngControl="firstName"
                   #firstName="ngForm"
                   required
                   minlength="2"
                   maxlength="35"
                   pattern_="FIRST_NAME_PATTERN"
                   [ngModel]="currentUserAccount?.firstName"
                   (ngModelChange)="currentUserAccount ? currentUserAccount.firstName = $event : null"
                   placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}"
                   class="form-control"/>
        </div>

        <div [hidden]="firstName.valid">
            <div *ngIf="firstName?.errors?.minlength" class="control-label">{{'FIRST_NAME_FORM.MIN_LENGTH'| translate}}</div>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary pull-right" [disabled]="buttonDisabled">{{'FIRST_NAME_FORM.SUBMIT'| translate}}</button>
        <a [routerLink]="['/dashboard/useraccount']" class="btn btn-link pull-right text-right">{{'FORM_CANCEL' | translate}}</a>
    </div>
</form>

Jedoch, wenn ich behaupte, dass ein ungültig-Formular -, Bemerke ich in der Konsole, in der das Attribut gültig von NgForm ist true...

 updateFirstName(firstNameForm) {
   console.log(firstNameForm);//the valid attribute of firstNameForm is true...
 }

Kann jemand bitte lassen Sie mich wissen, warum dies der Fall ist?

Ist es gewollt, dass pattern im pattern_="FIRST_NAME_PATTERN" hat eine zusätzliche _? Was ist formCtrl? ng-class sollte [ngClass]
Ja, ich bin bei der Migration eines ng1 app und ich nehme an, diese pattern_ und ng-class werden einfach ignoriert.
Ja, Sie sind einfach ignoriert.

InformationsquelleAutor balteo | 2016-05-15

angular angular2-forms

Du tust Vorlagen Formulare. Bitte Lesen Sie diese einfache plunk

<h1>Employee Form</h1>
<form #personForm="ngForm" (submit)="personFormSubmit(personForm)" novalidate>
    <div>
        <div>
            <input id="nameInput" type="text" name="name"
                   ngControl="name"
                   required
                   minlength="2"
                   maxlength="35"
                   [(ngModel)]="person.name" />
        </div>
    </div> 
    <div>
      <button type="submit">Submit</button>
    </div>
    <div style="color: red">{{validationMessage}}</div>
</form>

und dann den controller:

import { Component } from '@angular/core';
import { FORM_DIRECTIVES, ControlGroup, Control, Validators, FormBuilder, Validator, } from '@angular/common';
import 'rxjs/Rx';

export class Person {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    directives: [FORM_DIRECTIVES],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {

    person: Person;
    validationMessage: string;

    constructor() {
        this.person = new Person();
        this.validationMessage = "";
    }

    personFormSubmit(personForm: ControlGroup) {
        if (personForm.valid) {
          this.validationMessage = "Form Is Valid";
        }
        else
        {
          this.validationMessage = "Form Is Not Valid";
        }
    }

}

Wenn Sie verschieben möchten, um mehr komplexe dynamische Validierung dann wäre es besser zu konvertieren Model-driven Formen. Wie mit dieser plunk

InformationsquelleAutor Eric Weiss

5

Das ist das beabsichtigte Verhalten

Fand ich in dem change-log für die Version 2.0.0-alpha.46 (2015-11-11)

Zuvor, die controlsErrors getter der ControlGroup und ControlArray zurückgegeben, die Fehler seiner direkten Kinder. Das war verwirrend, weil das Ergebnis nicht der Fehler des verschachtelten Kinder (ControlGroup -> ControlGroup -> Control). Machen controlsErrors, damit solche Fehler erfordern würde, zu erfinden einige custom serialization-format, die Anwendungen zu verstehen. Da controlsErrors war nur eine bequeme Methode, und es war zu verwirrend, wir entfernen es. Wenn Sie wollen, um die Fehler des ganzen form serialisiert in einem einzigen Objekt, können Sie es manuell Durchlaufen die form und häufen sich die Fehler. Auf diese Weise haben Sie mehr Kontrolle darüber, wie der Fehler serialisiert werden.

Dann die docs für ControlGroup und ControlArray aktualisiert werden soll

Siehe auch https://github.com/angular/angular/issues/6504#issuecomment-171950667

Können Sie überprüfen, ob firstNameForm.valid ist false und dann Durchlaufen der Steuerung von Gruppen und Kontrollen für Fehler.

Den NgForm Klasse hat die errors Eigentum, weil es erbt von AbstractControlDirective aber die Fehler aus verschachtelten controls werden nicht erfasst, es.

InformationsquelleAutor Günter Zöchbauer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.