如何以编程方式显示mdl-textfield的错误消息？

我想在用户尝试发送表单时将空字段显示在数量文本字段上的MDL错误消息。领域是这样的：如何以编程方式显示mdl-textfield的错误消息？

<mdl-textfield 
     #quantityBox 
     type="text" 
     label="Num." 
     pattern="-?[0-9]*(\.[0-9]+)?" 
     error-msg="Insert a number!" 
     [(ngModel)]="selectedBoxQuantity" 
     floating-label 
     class="no-wrap"></mdl-textfield>

我可以访问到外地组件调用ViewChild：

@ViewChild('quantityBox') private quantityBox: MdlTextFieldComponent;

但很显然，我只能改变错误信息：

this.quantityBox.errorMessage = "New error message";

哪有我强制输入字段中没有输入无效值的消息？

我想什么来实现与此类似，当我点击/ TAP +按钮：

来源

2016-11-18 Michele DC

我'不太清楚你要实现的目标是什么 - 但这里是一个解决方案，你可以帮助找出答案。在required属性添加到mdl-textfield，使error-msg属性不动产所以角度对其进行评估：

<mdl-textfield 
     required 
     type="text" 
     label="Num." 
     pattern="-?[0-9]*(\.[0-9]+)?" 
     [error-msg]="message" 
     [(ngModel)]="selectedBoxQuantity" 
     floating-label 
     class="no-wrap"></mdl-textfield>

在您组件添加以下代码：

public message = 'Insert a number!'; 
    public selectedBoxQuantity_: number; 

    get selectedBoxQuantity() { 
    return this.selectedBoxQuantity_; 
    } 

    set selectedBoxQuantity(v: string){ 
    this.selectedBoxQuantity_ = v; 
    this.message = v.length === 0 ? 'Insert a number!' : 'Insert a valid number'; 
    }

这个文本框现在显示消息“插入一个号码！'在初始加载时，因为该字段是必需的，并且消息设置为“插入数字！”。如果用户输入方法selectedBoxQuantity被调用。如果该值仍然为空，则错误消息仍将插入一个数字！如果不是，则错误消息设置为“插入有效号码”。如果输入与您的模式不匹配，则会显示新的错误消息。如果输入是一个数字，错误信息就会消失。

来源

2016-11-18 14:46:17 michael

谢谢你的建议：我想要做的是动态添加/删除“required”属性。我希望这个文本框只有在用户点击+按钮时才变成红色，并且它仍然是空的。使用模板中设置的所需“属性”，该字段在组件初始化后立即变为红色。 –

readonly也可以在运行时更改[只读] ='在您的控制器中的属性' – michael

'' 暂停错误 “specialOrder！”： '能” t绑定到'readOnly'，因为它不是'mdl-textfield'的已知属性。' 刚刚更新到angular-mdl 2.4.4 now –

如何以编程方式显示mdl-textfield的错误消息？

回答

相关问题