В моем угловом приложении у меня есть форма с некоторыми полями: входы, указатель даты, выбор, ...
Во-первых, в ngOnInit () я инициализирую группу форм, вызывающую функцию initilizeForm (), где я создал группу форм и устанавливаю некоторые настройки, например, отключенный элемент управления формы или его значение «по умолчанию».
Затем пользователь записывает некоторую информацию, а затем я сохраняю данные группы форм. После этого я сбрасываю форму, чтобы иметь чистую форму состояния, а затем снова вызываю функцию initializeForm для установки значений по умолчанию. Но в данный момент функция ничего не делает, и я не знаю почему.
Инициализировать вызов в OnInit:
public formGroup: FormGroup;
ngOnInit() {
this.initializeForm();
}
Функция инициализации:
this.formGroup = this.formBuilder.group({
input1: [
{ value: '', disabled: true },
[Validators.XX, Validators.YY]
],
input2: [
{ value: '', disabled: false },
[
Validators.XX, Validators.ZZ
]
],
select1: [
{ value: 'Value1', disabled: true },
[Validators.XX]
]
//.... more fields
});
Сброс формы после «сохранения»
public savedOk() {
this.formGroup.reset();
this.formGroup.enable();
this.initializeForm();
}
Я не знаю, почему, когда я вызываю форму инициализации в ngOnInit, группа форм создается должным образом, а затем, если я вызываю форму инициализации, группа форм не показывает элементы управления формы со значением, установленным в этой функции.
select1 должен быть отключен и должен иметь опцию с выбранным Value1.
Это можно решить с помощью this.formGroup.get ('fieldName'). SetValue ('Value1')
и с .disabled (), но я хотел бы использовать для этого функцию инициализации.
Я использую Angular 7 и угловой материал.
Пример Пример шаблона:
<form [formGroup]="formGroup">
<mat-form-field>
<input matInput name="inputName" formControlName="inputName" required />
</mat-form-field>
<mat-form-field>
<mat-label>label</mat-label>
<mat-select placeholder="label" formControlName="select1">
<mat-option *ngFor="let op of options, trackBy: trackByFn" [value]="op.value">{{
op.label |
translate }}</mat-option>
</mat-select>
</mat-form-field>
</form>
Ищу больше информации, я думаю, что я должен использовать следующее при сохранении:
this.formGroup.reset({
select1: { value: 'Value1', disabled: true }
});