【问题标题】:How to access the value of an input disabled?如何访问禁用输入的值?
【发布时间】:2017-12-22 21:48:31
【问题描述】:

我在 angular 2 中创建一个反应形式,并使用材料 angular 2 来输入;

我需要将输入设置为禁用,并在提交解锁输入中的值时发送要发送的值。我已经创建了输入并且禁用的正在运行。我的问题是,当我给出提交值时,它没有出现。

我的代码

this.formVariacao = this._fb.group({

   id:[p && p['id']],
   codigoItem: [p && p['codigoItem'], Validators.required],
});

我的html

<md-input-container>
    <input mdInput placeholder="Código da Variação" formControlName="codigoItem" name="codigoItem">
</md-input-container>

我按如下方式阻止输入

this.formVariacao.get('codigoItem').disable();

只有当我发送表单时,价值才会到来。 Alguém pod me ajudar?

【问题讨论】:

标签: angular angular-material


【解决方案1】:

正如您所注意到的,Angular 会忽略表单对象中禁用的表单控件。

这可以通过使用getRawValue() 轻松解决,其中包括所有 表单控件,无论是否禁用。因此,例如在您提交时,您传递表单(不是表单值),如下所示:

(ngSubmit)="onSubmit(formVariacao)" 

那么你可以使用getRawValue:

onSubmit(form) {
  console.log(form.getRawValue())
}

【讨论】:

  • 是否还有某种订阅提供与valueChanges 相同的功能,但只提供原始值?我一直在寻找一段时间,但找不到可以提供此解决方案的东西。
【解决方案2】:

来自代码文档:

 /**
     * A control is `disabled` when its `status === DISABLED`.
     *
     * Disabled controls are exempt from validation checks and
     * are not included in the aggregate value of their ancestor
     * controls.
     */

因此,如果您使用disable() 只是为了使控件具有disabled 属性,请不要使用disable(),请使用[attr.disbaled]="yourVariable"

像这样:

<input [attr.disabled]="disabled" mdInput placeholder="Código da Variação" formControlName="codigoItem" name="codigoItem">

然后在你的打字稿中:

而不是

 this.formVariacao.get('codigoItem').disable(); 

这样做:

  private disabled = false;



  this.disabled = true;

【讨论】:

  • 感谢您的回答。但是我怎么能以反应形式使用它呢?我无法使用打字稿。
  • 这种方法的问题是 HTML 将 disabled="false" 和 disabled="true" 都视为“已禁用”
  • 而解决方案显然是:[attr.disabled]="disabled || null"
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-09-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-10
  • 2020-06-04
相关资源
最近更新 更多