Метод setValue не работает в приложении Angular

Question

Я разрабатываю веб-приложение, используя MEAN Stack с Angular 6. В моем html-файле есть кнопка для получения значений по умолчанию, когда я нажимаю эту кнопку, она должна заполнить поле формы значением по умолчанию.Вот моя HTML-форма.

    <div style="float: right" id="extrudedHeightPanel" *ngIf="isExtrudedHeight" name="extrudedHeight">
      <form #extrudedHeightForm="ngForm" (ngSubmit)="saveExtrudedHeightValue(extrudedHeightForm)" #form="ngForm">
        <nb-card class="action-buttons">
          <div class="form-input-group">
            <div class="row">
              <div class="">
                <button type='button' (click)="setDefaultValues()" class="btn btn-sm btn-rectangle btn-default text-case">Restore Default</button>
              </div>
              <div class="">
                <button type="submit" class="btn btn-sm btn-rectangle btn-default text-case">Done</button>
              </div>
            </div>
          </div>
        </nb-card>
        <br>
        <br>
        <br>
        <p>Extruded Height</p>
        <br>
        <div class="form group">
          Extruded Height:
          <input type="text" nbInput name="extrudedHeight" [(ngModel)]="extrudedHeight" />
        </div>
      </form>
    </div>

Я получил данные из mongo db в мой файл .ts и попытался установить значение в поле формы, используя метод setValue в Angular..ts file

    class{

        extrudedHeightForm: FormGroup;
        ngOnInit()
        {
        this.extrudedHeightForm = new FormGroup({
              extrudedHeight: new FormControl()
            });
        }

                  //Set default values for extrudedHeight
                  setDefaultValues() {
                    this.extrudedHeightService.getExtrudedHeight("default").subscribe(data => {
                      this.extrudedHeightForm.setValue({
                        extrudedHeight:data['extrudedHeight']
                      });
                    });
                  }

   }

У меня вопрос, следующая часть не работает.Я ошибся или есть какой-либо метод для достижения моего требования.

this.extrudedHeightForm.setValue({
                            extrudedHeight:data['extrudedHeight']
                          });

- ОБНОВЛЕНО-- Когда я перешел на this.extrudedHeightForm.get('extrudedHeight').setValue(data['extrudedHeight']);, как предложено в ответе, он тоже не работает.Чтобы проверить значение, я напечатал console.log.'Console.log (this.extrudedHeightForm.get (' extrudedHeight '));'Часть дает следующие значения.

Но значение 250 не отображается в поле формы.

Answer 1

при инициализации formcontrol, я думаю, вам нужно дать ему подсказку его типа, например:

       this.extrudedHeightForm = new FormGroup({
          extrudedHeight: new FormControl('')
        });

Следующий код должен работать для вас (я удалил некоторые несущественные части):

    <div style="float: right" id="extrudedHeightPanel" >
    <form [formGroup]="extrudedHeightForm"  (ngSubmit)="saveExtrudedHeightValue(extrudedHeightForm)">
      <div class="">
        <button type='button' (click)="setDefaultValues()" class="btn btn-sm btn-rectangle btn-default text-case">Restore Default</button>
      </div>
      <br>
      <br>
      <br>
      <p>Extruded Height</p>
      <br>
      <div>
        Extruded Height:

        <input type="text" formControlName="extrudedHeight" [(ngModel)]="extrudedHeightForm.extrudedHeight"/>
      </div>
    </form>
  </div>

Answer 2

Вы используете две совершенно разные формы.В вашем шаблоне у вас есть управляемая шаблоном форма, тогда как в вашем TS у вас есть реактивная форма, поэтому, конечно, когда вы устанавливаете значение в FormControl, оно не будет отражаться в вашем представлении.Вы должны фактически использовать свою реактивную форму в своем шаблоне.Вот упрощенная версия:

<form [formGroup]="extrudedHeightForm">
  <input formControlName="extrudedHeight" />
</form>

Построение формы выглядит так же, как у вас в ts, т.е.:

ngOnInit() {
  this.extrudedHeightForm = new FormGroup({
    extrudedHeight: new FormControl()
  });
}

и установка значения:

this.extrudedHeightService.getExtrudedHeight("default").subscribe((data: any) => {
  this.extrudedHeightForm.get('extrudedHeight').setValue(data.extrudedHeight);
});

В приведенном выше примере не используйте any в качестве типа, а вместо этого введите данные в качестве интерфейса или класса.

Answer 3

Попробуйте

this.extrudedHeightForm.get('extrudedHeight').setValue(data['extrudedHeight']);

Вы должны установить значение в FormControl, а не в FormGroup.