angular5 - Angular 5 最大长度和字母数字验证

Question

如果用户输入的不是this之后的字母数字，我试图显示错误示例，但没有成功。始终显示错误消息。

这是代码片段:

<div class="col-md-4" *ngIf="this.context.risk.contractOrigin === 'Appel_d_offre'">
    <label class="control-label" for="numberTenderInvitation">Numéro d'appel d'offre</label>
    <input class="form-control" id="numberTenderInvitation" name="numberTenderInvitation"
           [(ngModel)]="context.risk.policyId"
           #numberTender="ngModel"
           maxlength="10"
           [pattern]="'^[a-zA-Z \-\']$'"
           required/>
</div>
<small class="errorLabel" [hidden]="!numberTender.errors">
    Le champ comporte une erreur.
</small>

我得到的错误是:

ERROR TypeError: Cannot read property 'errors' of undefined

我哪里出错了？

Answer 1

您的模式有一些问题

1.它仅检查单个字符
^ 字符串开头
[ ... ] 匹配 1
$ 字符串结尾
如果您需要至少一个字符，则需要添加一个“+”(如果有 0 个或多个“*”)

2.您说的是非字母数字，但您没有专门检查数字，您应该在模式中添加 0-9

3.尝试将 [\-] 移到 [\'] 之后，这样你的最终模式如下(假设你至少需要一个字符作为输入)

[pattern]="'^[a-zA-Z0-9 \'\-]+$'"