Я написал компонент страницы регистрации на Angular. Я следовал нескольким учебникам и наткнулся на очень неприятную ошибку. Нажатие кнопки «Отправить» в форме приведет к тому, что консоль выведет «undefined» при попытке получить доступ к значению NgForm. Доступ к полю «valid» в NgForm вернет true или false, как и ожидалось.
страница:
<app-players></app-players>
<div class="container" style="text-align:center">
<h3>Register a new account!</h3>
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<label>Username:</label> <input type="text" id="username"
required #username="ngModel"
name="username" ngModel><br>
<label>Password:</label> <input type="password" id="password"
required #password="ngModel"
name="password" ngModel><br>
<label>Email:</label> <input type="text" id="email"
required #email="ngModel"
name="email" ngModel><br>
<button type="submit" class="btn btn-success" [disabled]="!newPlayerEntry.form.valid">Submit</button>
</form>
</div>
<div id = "result">
</div>
Компонент:
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NewPlayer } from './new-player';
@Component({
selector: 'app-players-register',
templateUrl: './players-register.component.html',
styleUrls: ['./players-register.component.css']
})
export class PlayersRegisterComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
onSubmit(f: NgForm) {
console.log(f.value);
}
}