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

Question

我正在使用 angular dart 开发应用程序。我正在使用 angular dart material 输入来获取用户的输入。

我有一个多行文本输入，我使用 material input 和 type="text".

我做了这个字段 "required" 但问题是当用户输入白色 space 或回车时，"required" 消失了。我需要一个属性，我可以在其中指定一个约束条件，即必须输入至少一个非白色 space 字符。

如何实现？

这是我使用 material 输入的代码：

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

Answer 1

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

All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well

所以使用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]* 将有助于匹配至少一个非 space 字符的字符串。

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