Angular 6 getRawValue () не будет возвращать отключенные значения

Question

У меня есть пример формы следующим образом:

 stuff: IStuff; 
 buildForm() {
        this.createForm = this.form.group({
            Val1: [{ value: '', disabled: true }],
            Val2: [{ value: '', disabled: true }]
        });

Как видите, оба значения отключены.

Конструктор инициирует получение httpClient и заполняет модель:

this.exampleHttpService.getStuff()
    .subscribe(stuff => this.stuff = stuff); 

Где материал:

export interface IStuff {
    Val1?: number; 
    Val2?: number
}

Привязка выполняется в html для обоих Val1и Val2 следующим образом:

  <input name="Val1" matInput formControlName="Val1" [value]="stuff?.Val1">

Это все бог, и он приятно назначает значения и отображает их на экране;однако, когда я пытаюсь вернуть эти значения, используя

this.createForm.getRawValue()

, я получаю '' пустые строки для обоих значений ...

Есть идеи?

Answer 1

Когда вы используете реактивные формы, входное значение уже привязано к элементу управления формой, вам не нужно (и не нужно) связывать значение ввода, поскольку значение и элемент управления формы - это не одно и то же.В вашем коде вы инициализируете «материал», связанный с входными значениями, но не инициализируете значения элемента управления формы.Вам нужно инициализировать значения элемента управления формы:

this.exampleHttpService.getStuff()
    .subscribe((stuff) => {
        this.createForm.controls['Val1'] = stuff.Val1;
        this.createForm.controls['Val2'] = stuff.Val2;
    }); 

Answer 2

Вы устанавливаете значение в FormControls, как только получаете данные из сервиса?Из кода, который я вижу, вы инициализируете FormControls как пустую строку, поэтому я могу предположить, что вы, возможно, не устанавливаете значения?