Angular Реактивные формы устанавливают значения с отключенным атрибутом после инициализации формы - PullRequest
Новая
       6

Angular Реактивные формы устанавливают значения с отключенным атрибутом после инициализации формы

0 голосов
/ 25 марта 2020

Я создал одну форму.

HTML Код: 

<form [formGroup]="form">
  <input formControlName="name"/>
  <input formControlName="description"/>
  <input formControlName="category"/>
  <input formControlName="type"/>
</form>

Ниже приведен код для инициализации формы, устанавливающий начальное значение как пустое: 

form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
  this.initForm();
}

private initForm() {
  this.form = this.fb.group({
      name: ['', Validators.required],
      description: [''],
      category: ['', Validators.required],
      type: ['',  Validators.required],
  });
}

При определенных условиях форма должна быть заполнена данными, полученными из API. Как только данные получены ниже, выполняется код: 

// data received from API
if(data){
 this.form = this.fb.group({
  name: [{value: data.name, disabled: true}],
  description: [{value: data.description, disabled: true}],
  category: [{value: data.category, disabled: true}],
  type: [{value: data.type, disabled: true}]
 });
}

В приведенном выше случае значения обновляются корректно, но элементы управления не отключаются.

Я также попробовал setValue: 

this.form.setValue({
  name: {value: data.name, disabled: true},
  description: {value: data.description, disabled: true},
  category: {value: data.category, disabled: true},
  type: {value: data.type, disabled: true}
});

В приведенном выше случае значения заполняются [объект Object].

Как установить значение поля и отключить атрибут одновременно?

1 Ответ

1 голос
/ 25 марта 2020

Почему бы вам не просто setValue и отключить всю форму? 

this.form.setValue(data);
this.form.disable();
...