Постановка проблемы
Я не могу присвоить значения моей переменной моим входным значениям HTML, и в консоли возникла ошибка: TypeError: Cannot read property 'firstName' of undefined. Даже если ошибка не влияет на работу моего приложения.
Что я пытаюсь сделать
Я пытаюсь создать страницу редактирования для пользователя, где они могут обновлять поля по своему усмотрению. Я получаю данные из своего сервиса и отображаю человека на входах в HTML. Это позволило бы пользователю редактировать текущую информацию и больше не вводить ее заново.
Код
Компонент
export class EditDocumentComponent implements OnInit {
// Is for population the fields in the UI so the user does not have to type in everything again
private savedDocument: Will;
// The current person ID that has been selected
private personId: number;
private form: FormGroup;
constructor(private builder: FormBuilder, private serv: DataService, private route: ActivatedRoute) {
this.route.queryParams.subscribe(params => {
this.personId = params["personId"];
});
}
ngOnInit() {
// Calls service which gets a single person from the backend server
this.serv.getSinglePersonById(this.personId).subscribe((result: Will) => {
this.savedDocument = result;
});
this.form = this.builder.group({
firstName: [''],
lastName: [''],
dateOfBirth: [''],
postalAddress: [''],
city: [''],
country: [''],
provinceState: [''],
});
}
private sendUpdatedData() {
console.log("Hit submit button");
console.log("Person: " + this.savedDocument.postalAddress);
}
}
Объяснение кода
Как видите, у меня есть personID, где он отправляется в службу и отправляется на сервер, где он получает один человек. После этого возвращаемые данные присваиваются savedDocument, и именно эту переменную я использую для отображения данных в пользовательском интерфейсе. Так как я получаю firstName не определено, но я удостоверился, что это не так, поместив console.log() в метод, который отправляет форму, которая называется: sendUpdatedData(). Не является неопределенным.
HTML
<body>
<h1 class="title">Edit your document here</h1>
<form [formGroup]="form">
<!-- Section 1 -->
<section class="form1">
<mat-form-field appearance="outline" class="firstName">
<mat-label>First Name</mat-label>
<input matInput type="text" maxlength="50" value="{{savedDocument.firstName}}" formControlName="firstName">
</mat-form-field><br>
<!-- When I do this, it displays the data, which means it is not undefined
<h1>{{savedDocument.firstName}}</h1>
<mat-form-field appearance="outline" class="lastName">
<mat-label>Last Name</mat-label>
<input matInput type="text" maxlength="50" value="{{savedDocument.lastName}}" formControlName="lastName">
</mat-form-field><br>
<mat-form-field appearance="outline" class="dob">
<mat-label>Date of Birth</mat-label>
<input matInput type="text" maxlength="50" value="{{savedDocument.dateOfBirth}}" formControlName="dateOfBirth">
</mat-form-field>
</section>
... <!-- More here -->
</form>
</body>
Объяснение кода
Я использую value="{{savedDocument.field}}" на входе, но он не показывает данные.
Кроме того, когда я удаляю [formGroup] из тега <form>, он отображает данные в значении.
Не отображает данные в значении входных тегов
<form [formGroup]="form">
...
</form>
Отображает данные в значении входных тегов
<form>
...
</form>