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

时间:2018-10-04 01:59:30

标签: node.js angular mean-stack

我正在使用Angular 6使用MEAN Stack开发一个Web应用程序。我在html中有一个按钮,当我单击该按钮时可以获取默认值,该按钮应将默认值填充到表单字段中。这是我的html表单。

export = Object.assign ( foo, { default: foo } );

我将数据从mongo db获取到我的.ts文件,并尝试使用Angular中的'setValue'方法将值设置为表单字段。 .ts文件

let obj = {};
function addData(){
    let length = Object.keys(obj).length
    temp = {name:"test"+(length+1),hobby:"test"+(length+1)}
    obj[length]= temp;
    console.log(obj);
}

我的问题是以下部分无法正常工作。我做错了还是有什么方法可以满足我的要求?

    <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>

-更新- 当我换成 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'] }); }); } } 如答案中所建议,它也不起作用。为了检查该值,我打印了console.log。 'console.log(this.extrudedHeightForm.get('extrudedHeight'));'部分给出以下值。 Value

但是值250不会显示在表单字段中。

3 个答案:

答案 0 :(得分:0)

尝试

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

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

答案 1 :(得分:0)

在初始化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>

答案 2 :(得分:0)

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