'setValue' 方法在 Angular 应用程序中不起作用

Question

我正在开发一个使用 MEAN Stack 和 Angular 6 的 Web 应用程序。我的 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 数据库获取数据到我的 .ts 文件，并尝试使用 Angular 中的 'setValue' 方法将值设置到表单字段。 .ts 文件

    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

尝试

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

您应该在 FormControl 上设置值，而不是在 FormGroup 上。

Answer 2

当初始化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 3

您使用的是两种完全不同的形式。在您的模板中，您有一个模板驱动的表单，而在您的 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 作为类型，而是将您的数据键入为接口或 class。

'setValue' 方法在 Angular 应用程序中不起作用

'setValue' method is not working in Angular application

node.js

mean-stack

angular