Question

我在表单中使用formgroup和form控件，当用户页面打开时，我已经绑定了在字段中填充的值

但是当我保存表单时，字段将带有空值。

 ngOnInit() {
    this.contactDetailsForm = this.fb.group({
      personalInfoForm: this.initPersonalInfo(),
      financialInfoForm: this.initFinancialInfo()
    });

    initPersonalInfo() {
    return this.fb.group({
      prospectFname: [''],
      prospectLname: [''],
      prospectPreferredname: [''],
      prospect_dob: [],
      prospect_addr1: [''],
      prospect_city: [''],
      prospect_st: [''],
      prospect_zip: ['']
    });
  }

  initFinancialInfo() {
    return this.fb.group({
      another_nasd_firm: [''],
      another_nasd_firm_name: [''],
      selfEmployed: [''],
      work_status_change: [''],
    });
  }
  }

  this._contactFilterService
      .getContactDetailsDataById(this.selectedContact, this.brokerId)
      .subscribe(result => {
        if (result) {
          this.contactdetail = result;
          this.prospectId = result.prospectId;
          this.setPatchValues(result);
          Here i want to setPatch values to the fields
            prospectFname: [''], // bind the latest values to form field
            prospectLname: [''],

        }
      });

Answer 1

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var socket = io();
        socket.emit('ready', function(data) {});
        socket.on('change_result', function(data) {
            document.getElementById('heading1').innerHTML = "Result: \""+data.result + "\"";
        });
    });
</script>

这是你如何获得最新的personalInfoForm和financialInfoForm

 const personalInfoFormModel = this.personalInfoForm.value;               
 const financialInfoFormModel = this.financialInfoForm.value;

或只是prospectFname = personalInfoFormModel.prospectFname; // bind the latest values for form prospectLname = personalInfoFormModel.prospectLname;

Answer 2

由于您没有嵌套的对象数组，并且数据中的对象属性与表单中的表单控件匹配，您只需执行以下操作：

setPatchValues(result) {
  this.contactDetailsForm.setValue(result)
}

否则你需要设置长手的值，每个formcontrol以与setValue相同的方式分别设置，例如：

this.contactDetailsForm.get('personalInfoForm.prospectFname').setValue(result.someProp)

或与小组：

this.contactDetailsForm.get('personalInfoForm').setValue({
  prospectFname: result.someProp,
  // ....
})

Answer 3

在ngOnInit（）中，使用变量设置表单字段的初始值。

    prospectFname: new FormControl(formOne.prospectFname)

并且，在setPatchValues方法中，使用最新值编辑这些变量。

将最新值绑定到表单

3 个答案: