如何验证材料输入中的输入文本长度？

Question

我正在使用 angular dart 开发应用程序。我正在使用角度飞镖材料输入来获取用户的输入。

我有一个多行文本输入，我使用材料输入和 type="text"。

我已将此字段设为“必填”，但问题是当用户输入空格或输入时，“必填”消失了。我需要一个属性，我可以在其中指定必须输入至少一个非空白字符的约束。

如何做到这一点？

这是我使用材料输入的代码：

<material-input
    ngControl="textAnswer" [(ngModel)]="answer" multiline
    type="text" label="Your answer" required>
</material-input>

Answer 1

根据documentation，您可以使用所有input 元素属性。

所有可用于普通<input> 和<textarea> 元素的属性也可以用于<mat-form-field> 内的元素

所以使用HTML5 pattern attribute来匹配自定义模式（正则表达式）。

<material-input
    ngControl="textAnswer" [(ngModel)]="answer" multiline
    pattern="[\s\S]*\S[\s\S]*"
    type="text" label="Your answer" required>
</material-input>

[\s\S]*\S[\s\S]* 将有助于匹配至少包含一个非空格字符的字符串。

注意：要包含所有其他字符，请使用 [\S\s]，因为 . 不包含换行符。