HTML5：用JS/Jquery添加后属性不识别

Question

好吧，我被这个困住了。 我正在向输入添加 2 个属性，但 Angular 无法识别它们进行验证。我可能做错了什么？

这是我的 HTML

<input type="text" id="idDOC" class="form-control" [(ngModel)]="person.DOC_PERSON" #kind_doc="ngModel" name="dni_persona"  required>

这是我的组件.ts

document.getElementById("idDOC").setAttribute("maxlenght", "9");
document.getElementById("idDOC").setAttribute("pattern", "^[0-9]{8}$");

这是控制台：（我输入的是：'333333333333'）

图案和最大长度在那里！但是在 ng-reflect-model 之后，Idk 发生了什么，有什么建议吗？

提前致谢。

Answer 1

您的代码中有输入错误

应该是maxlength 而不是maxlenght

document.getElementById("idDOC").setAttribute("maxlength", "9");

为什么要直接访问 DOM 来设置属性？这不是 Angular 中的正确做法。您可以直接将其添加到您的模板中。

Answer 2

试试这个。

HTML

<input type="text" id="idDOC" class="form-control" [(ngModel)]="person.DOC_PERSON" 
#kind_doc="ngModel" name="dni_persona" [maxlength]="maxLength" [pattern]="inputPattern"  required>

JS

maxLength = 9;
pattern= /^[0-9]{8}$/;