Блог

Я начинаю с angular2. У меня есть простая форма, управляемая шаблоном, и я могу получить доступ к данным в консоли. Но у меня возникли проблемы с передачей данных. Вот мой код.

 import {Component} from "angular2/core";

@Component({
selector: 'my-template-driven',
template:`
    <h2>Sign-up form</h2>
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div>
            <label for="email">Mail</label>
            <input ngControl="email" type="text" id="email" required #email="ngForm">
            <span class="validation-error" *ngIf="!email.valid">Not Valid</span>
        </div>
          <div>
            <label for="password">Password</label>
            <input ngControl="password" type="text" id="password" required #password="ngForm">
            <span class="validation-error" *ngIf="!password.valid">Not Valid</span>
        </div>
          <div>
            <label for="confirm-password">Confirm Password</label>
            <input ngControl="confirm-password" type="text" id="confirm-password" required #passwordConfirm="ngForm">
            <span class="validation-error" *ngIf="!passwordConfirm.valid">Not Valid</span>
        </div>
        <button type="submit" [disabled]="!f.valid || password.value !== passwordConfirm.value">Submit</button>
    </form>
    <h2>You Submitted</h2>


`
})
export class TemplateDrivenFormComponent {
user: {email: '', password: ''};

onSubmit(form){
    //console.log(form);
    this.user.email = form.value['email'];
    //this.user.password = form.controls['password'].value;
}
  

}

Я постоянно получаю эту angular2.js:23941 ORIGINAL EXCEPTION: TypeError: Cannot set property 'email' of undefined ошибку. Как я могу получить доступ к данным отправленной формы.

Вы неправильно объявляете свой local, и вы должны инициализировать его при объявлении или, возможно, в вашем конструкторе

 user: any;

constructor() {
    this.user = {email: "", password: ""} as any;
}
  

после : вы должны указать тип.

Входные данные Html должны содержать атрибут « ngModel «.