я искал долго и упорно для ответа на этот вопрос, и я думаю, что у меня есть «правильный» путь к нему (один из них, по крайней мере). Так что я выложу здесь:
Сначала я изменил свою форму, чтобы использовать 'formGroup' в элементе формы следующим образом:
<form class="mat-dialog-content" (ngSubmit)="submit()" #formControl="ngForm" [formGroup]="patchForm">
<div class="form">
<mat-form-field>
<input matInput #input
class="form-control"
placeholder="name"
name="name"
formControlName="name"
id="name"
selected="data.name"
required
>
<mat-error *ngIf="data.name== ''">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
[... repeat div class="form" blocks for other inputs/dropdowns etc ...]
Обратите внимание, что мне пришлось удалить [(ngModel)]="someVal" из всех элементов поля формы. Angular бросает колебание, если вы пытаетесь использовать их с formGroup.
Теперь добавьте атрибут элемента formControlName="name", который вы видите в коде выше.
Затем мне пришлось добавить в app.module.ts ReactiveFormsModule:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
, а также добавьте это в массив импорта того же файла:
imports: [
BrowserModule,
...
FormsModule,
ReactiveFormsModule
],
В файле component.ts я настроил [formGroup]="patchForm" в соответствии с документацией здесь https://angular.io/api/forms/FormGroup#setvalue
В моем диалоге есть 3 поля:
patchForm = new FormGroup({
age: new FormControl(),
name: new FormControl(),
numberLegs: new FormControl()
});
Итак, formControl ожидает объект, соответствующий форме. В моей функции onInit у меня есть вызов API для получения данных, которыми я хочу заполнить форму, и поэтому внутри этого подписчика я использую метод patchValue() из Angular для установки значений:
this.projectService.getProjectFunction(this.projId, this.rowId).subscribe(x=> {
this.fetchedProjFunc = x;
// patchFrom expects an object matching to the formgroup, field by field.
this.patchForm.patchValue({
age: this.fetchedProjFunc['age'],
name: this.fetchedProjFunc['name'],
numberLegs: this.fetchedProjFunc['numberLegs']
});
});
Это, похоже, сработало. Затем мне пришлось установить значения объекта, который я возвращал в API / базу данных в моем возвращаемом объекте, чтобы указать правильные значения, поэтому, когда пользователь нажимает кнопку «сохранить», он вызывает функцию «verifyPut», которая содержит объект данные для отправки, вот так:
public confirmPut(): void {
this.projectFunction = {
...
name: this.patchForm.value['name'],
...
который в свою очередь вызывает функцию, которая выполняет PUT для API.
Я думаю, что именно так, форма проверяет на пустые строки и пропущенные значения, как и ожидалось.
Если я что-то пропустил, и кто-нибудь когда-нибудь прочтет это, дайте мне знать ...:)