Angular2/material 2：当以编程方式更改值时，md-input-container 标签不会重置浮点数

Posted 2023-03-13

【中文标题】Angular2/material 2：当以编程方式更改值时，md-input-container 标签不会重置浮点数

【英文标题】：Angular2/material 2: md-input-container label is not resetting float when value is changed programmatically

【发布时间】：2017-05-18 03:23:08

【问题描述】：

我在使用 @angular/material 的 md-input-containers 和响应式表单模块时遇到问题。

我正在制作一个包含三个md-inputs 的登录表单，它们都使用FormBuilder 的FormGroup 绑定到值。那里的一切都很好。

我的问题是在 ngSubmit 函数中，如果输入的凭据无效，我将重置表单。使用FormGroup 的.reset() 方法会将值重置为默认值，但md-input-containers 中的浮动标签不会重置为其原始位置，因为它们应该位于空白字段中。我猜 Material Design 指令正在寻找一个模糊事件来更新它，但我不知道，我不知道如何强制它发生。

这是ngSubmit 函数：

  submitForm(username: string, password: string, companyID: any):void 

    this.userService.login(username, password, companyId)
      .then(() => 
        this.router.navigate(['main']);
      )
      .catch(() => 
        this.loginForm.reset();
      )
    

在调用this.loginForm.reset() 时，表单将重置为默认值（空字符串），但标签仍会浮动：

Labels still float. I reset Company ID for reference.

关于如何解决这个问题的任何想法？我真的不想调用ElementRef，尽管我已经尝试这样做来强制模糊，但这并没有解决它。

【问题讨论】：

如果这对任何人来说仍然是个问题，我建议制作一个 plunker 并在 github.com/angular/material2 上提交问题

【参考方案1】：

尝试使用 md-input 控件代替包装在 md-input-container 中的输入。 它对我有用。