angular - 如何在不创建新指令的情况下向模板驱动表单添加自定义验证(最大字符数)

Question

我有一个模板驱动的表单。我需要添加自定义验证器，它将检测输入中的最大字符数并显示错误消息，如果我们收到错误消息，则必须禁用“确定”按钮。我有 5-7 个输入，在代码示例中，我只提供 2 个来显示语法。

我试过 max-characters = 10 但该属性不允许输入超过 10 个字符。在我的例子中，用户可以输入任何他想要的字符(超过 10 个)，但在他输入第 10 个字符后，应该是错误消息并且按钮必须是禁用。

不幸的是，我是模板驱动表单的新手，我的任务是只在模板表单中完成。伙计们，有人可以向我解释一下制作带有输入和自定义验证器的表单的最佳方法吗？任何帮助都会有所帮助。

<form
    class="my_ex_form"
    #myExForm="ngForm"
    novalidate>
    <div class="input">
      <label class="required">One</label>
      <input
        ngxTrim='keyup'
        required
        #one="ngModel"
        name="one"
        maxlength="64"
        [(ngModel)]="ex.name"
        placeholder="Enter...">
      <span *ngIf="one.value?.length >= 10" class="error-text">Max length 10 characters.</span>
    </div>
   <div class="input">
      <label class="required">Two</label>
      <input
        ngxTrim='keyup'
        required
        #two="ngModel"
        name="two"
        maxlength="10"
        [(ngModel)]="ex.nameTest"
        placeholder="Enter...">
      <span *ngIf="two.value?.length >= 10" class="error-text">Max length 10 characters.</span>
    </div>
    <div>
     <button
        type="submit"
        [disabled]="someOtherInputsValue || someOtherCheckboxesValue"
        class="btn btn-short"
        (click)="validate(myExForm)">
        ok
      </button>
    </div>
</form>

Answer 1

你可以使用引用变量并手动使用setError，在示例中，我的引用变量是“input1”，我等于一个“ngModel”，这允许我们使用input1.invalid，或input1.control .setErrors() 有点像

<input #input1="ngModel" [(ngModel)]="value" 
   (input)="input1.control.setErrors(input1.value.length>10?'max length':null)">
{{input1.invalid}}

如果我们愿意，我们可以做一个函数

checkControl(control:NgModel)
  {
    if (control.control.value && control.control.value.length>10)
      control.control.setErrors({error:"Max length exceded"})
    else
    control.control.setErrors(null)
  }

我们的表格就像

<form #myform="ngForm">
<input #input1="ngModel" name="input1" [(ngModel)]="value1" 
   (input)="checkControl(input1)">
{{input1.invalid}}
<input #input2="ngModel" name="input2" [(ngModel)]="value2" 
   (input)="checkControl(input2)">
{{input2.invalid}}
</form>
{{myform.invalid}}

参见 stackblitz