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>

这是我的组件。

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

这是控制台：（我在输入中输入了“ 333333333333”）

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

谢谢。

Answer 1

尝试一下。

  

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}$/;

Answer 2

您的代码中有一个输入错误

应为maxlength而不是maxlenght

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

为什么要直接访问DOM以访问setAttribute？在Angular中，这不是正确的做法。您可以直接将其添加到模板中。