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

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

Answer 2

如果控件的值之间没有依赖关系，则不需要自定义指令。我尝试运行您的代码，除了OK 按钮外，它按预期工作。

您可以使用myExForm.invalid 设置/取消设置按钮元素中的disabled 属性。

Answer 3

我做了什么：

 <form
    class="my_ex_form"
    #myExForm="ngForm"
    novalidate>
    <div class="input">
      <label class="required">One</label>
      <input
        ngxTrim='keyup'
        required
        #one="ngModel"
        name="one"
        [(ngModel)]="ex.name"
        placeholder="Enter...">
      <span *ngIf="errMsg" 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"
        [(ngModel)]="ex.nameTest"
        placeholder="Enter...">
      <span *ngIf="errSecMsg" class="error-text">Max length 10 characters.</span>
    </div>
    <div>
     <button
        type="submit"
        [disabled]="invalidValue()"
        class="btn btn-short"
        (click)="validate(myExForm)">
        ok
      </button>
    </div>
    </form>

我的组件是：

   errMsg = false;
   errSecMsg = false;
   formChangesSubscription: any;

   ngOnInit() {
        this.checkChanges();
      }
checkChanges() {
    this.formChangesSubscription = this.ngForm.form.valueChanges.subscribe(form => {
      this.errMsg = form.name && form.name.length > 10;
      this.errSecMsg = form.nameTest && form.nameTest.length > 10;
    });
  }