Angular 5 maxlength和字母数字验证

Question

在此示例之后，如果用户输入的不是字母数字，但我尝试显示错误，但没有成功。总是显示错误信息。

这是代码片段：

<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>

我得到的错误是：

错误TypeError：无法读取未定义的属性“错误”

我哪里做错了？

Answer 1

您的模式有一些问题

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

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

3.尝试将[\-]移到[\']之后，以使最终样式如下（假设您希望至少一个字符作为输入）

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