web-dev-qa-db-fra.com

Soumettre le formulaire dans Angular4 et Material2

J'ai essayé de créer mon premier formulaire de connexion avec Angular 4.0.0 avec Material 2. Mais le formulaire ne soumet pas et ne déclenche pas la fonction.

<form #UserLogin="ngForm" *ngIf="active" (ngSubmit)="onSubmit(UserLogin.value)">
<md-input-container>
    <input mdInput [(ngModel)]="data.email" ngControl="email" name="email" placeholder="Benutzername" type="text" required>
</md-input-container>

<md-input-container>
    <input mdInput [(ngModel)]="data.password" ngControl="password" name="password" placeholder="Passwort" type="password" required>
</md-input-container>

<button md-button class="submit-btn" type="submit" [disabled]="!UserLogin.form.valid">Login!</button>

La fonction Soumettre:

onSubmit(value: any) {

    console.log('sdfdfg');

    Object.assign(value, this.additionalData);
    this.submitted = true;

    this.auth.login(value).subscribe(
        data => {
            this.loginSuccess.emit(data);
        },
        error => {
            for (const field in this.formErrors) {
                if (this.formErrors.hasOwnProperty(field)) {

                    this.formErrors[field] = [];
                    if (this.validationMessages[field].hasOwnProperty(error.systemCode)) {
                        this.formErrors[field].Push(this.validationMessages[field][error.systemCode]);
                    }
                }
            }
        }
    );

}

Lorsque je clique sur le bouton de connexion, il ne jette pas le journal de la console dans la console. Quelqu'un a une idée?

angulartypescriptangular-material
6
Budi

changer le type de bouton = "bouton"

<form #UserLogin="ngForm" (ngSubmit)="onSubmit(UserLogin)">
<md-input-container>
    <input mdInput [(ngModel)]="data.email" name="email" placeholder="Benutzername" class="form-control"  type="text" required>
</md-input-container>

<md-input-container>
    <input mdInput [(ngModel)]="data.password" name="password" class="form-control" placeholder="Passwort" type="password" required>
</md-input-container>

<button md-button class="submit-btn" type="button" [disabled]="!UserLogin.form.valid">Login!</button>
</form>

onSubmit(form: ngForm) {

console.log('sdfdfg');
console.log(form.value);

}
4
Arun Kumaresh