Question

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

我尝试了max-characters = 10，但是该属性不允许键入超过10个字符。在我的情况下，用户可以键入任何想要的字符（大于10个字符），但是键入10th之后，应该是错误消息，并且按钮必须为禁用。

不幸的是，我是模板驱动形式的新手，我的任务是仅以模板形式进行。伙计们，有人可以向我解释使用输入和自定义验证程序制作表格的最佳方法吗？任何帮助都会有所帮助。

<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;
    });
  }

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

3 个答案: