动态禁用控件时显示警告消息 angular2答案

【问题标题】：Warning message displaying while disabling controls dynamically angular2动态禁用控件时显示警告消息 angular2
【发布时间】：2017-03-31 15:36:44
【问题描述】：

我想禁用页面加载中的所有控件，并在用户单击反应式表单中的添加按钮时启用所有控件。因此，为了实现这一点，我在 html 模板中使用了 [disabled] 属性，但我在控制台中收到以下警告消息。

警告：

看起来您正在使用带有响应式表单的 disabled 属性。如果将 disabled 设置为 true 当您在组件类中设置此控件时，disabled 属性实际上将在 DOM 中设置为你。我们建议使用这种方法来避免“检查后更改”错误。

  Example: 


     form = new FormGroup({
        first: new FormControl(
    {value: 'Nancy', disabled: true},Validators.required),
        last: new FormControl('Drew', Validators.required)
      });

请帮助我如何避免此警告消息并满足我的要求。

【问题讨论】：

警告不能说明一切吗？将模板驱动的表单与响应式表单混合使用通常不是一个好主意。

标签： angular disabled-control

【解决方案1】：

@GünterZöchbauer 是正确的，警告是说您应该在创建时以编程方式启用/禁用控件，如示例中或通过函数 .disable() 然后使用 .enable() 函数启用每个控件或在它将向下传播的顶层（除非您指定 false）。

如果您以反应形式绑定到[disabled]，则行为可能无法按预期工作。

来自 AbstractControl 文档：

disable({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void 禁用控件。这意味着控制将是免于验证检查并从总价值中排除任何父母。其状态为 DISABLED。

如果控件有子控件，所有子控件都将被禁用以维护模型。

enable({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void 启用控件。这意味着控制将是包含在验证检查及其父项的合计值中。它的状态是根据它的值和它的验证器重新计算的。

如果控件有子控件，则所有子控件都将被启用。

【讨论】：