angular - 设置和禁用不绑定数据的angular2表单值

Question

如果用户可用，这是我更新表单的方法。

if (this.user.landmark) this.uploadForm.controls['landmark'].setValue(this.user.landmark || '');
    //if (this.user.landmark) this.uploadForm.get('landmark').disable({ onlySelf: true });

如果我取消注释禁用，然后单击提交，则不会在输出 json 中生成界标字段。

例如

不禁用

console.log(this.uploadForm.value) 给出

{
username:"dummyUser",
landmark:"Nearby EB Office"
}

禁用

console.log(this.uploadForm.value) 给出

{
username:"dummyUser"
}

Answer 1

FormGroup.value不包括禁用的控件

 it('should ignore disabled controls when serializing value in a group', () => {
    const c = new FormControl('one');
    const c2 = new FormControl('two');
    const g = new FormGroup({one: c, two: c2});
    expect(g.value).toEqual({one: 'one', two: 'two'});

    c.disable();
    expect(g.value).toEqual({two: 'two'});

    c.enable();
    expect(g.value).toEqual({one: 'one', two: 'two'});
  });

改为使用this.uploadForm.getRawValue()。另请参阅文档

如果您想包含所有值而不考虑禁用状态，请使用此方法。否则，value 属性是获取组值的最佳方式。