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

Question

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

我有一个多行文本输入，我使用材料输入和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]，因为.不包含换行符。