Question

在角度为6的表单中，我使用了“ jQuery Bootstrap触摸键盘（jQBTK）”在某些输入上使用了虚拟键盘。我使用了数据驱动的方法来生成表单，并且还在输入中设置了所需的验证器。但是当我用虚拟键盘填充输入时不会触发它们。只有在我用键盘填充输入内容时，它们才会被调用。
我的表单是这样的：

<form [formGroup]="sampleForm" (ngSubmit)="submit()">
<mat-form-field>
    <input  class="keyboard form-control" id="sampleInput"
            matInput formControlName="sampleInput"
            [errorStateMatcher]="matcher" >
    <mat-error *ngIf="sampleForm.controls['sampleInput'].hasError('required')">
      input required!
    </mat-error>
    <mat-error *ngIf="sampleForm.controls['sampleInput'].hasError('pattern')">
      pattern violated!
    </mat-error>

</mat-form-field>

表单的类型脚本是这样的：

export class MyErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
      }
    }

    @Component({
      selector: 'app-sample',
      templateUrl: './sample.component.html',
      styleUrls: ['./sample.component.css']
    })
    export class UserRegComponent {

      sampleForm: FormGroup;

      constructor(private fb: FormBuilder) {
        this.sampleForm = this.fb.group({
          sampleInput: ['', [Validators.required, Validators.pattern('[0-9]{5,12}')]],
        });
      }

    }

我也尝试过使用自定义验证器，但是也没有被调用。我尝试的其他选项是在发生以下“更改”或“输入”事件时调用updateValueAndValidity()方法：

<input  class="keyboard form-control" id="sampleInput"
            matInput formControlName="sampleInput"
            [errorStateMatcher]="matcher"
            (change)="sampleForm.controls['sampleInput'].updateValueAndValidity()" >   
<input  class="keyboard form-control" id="sampleInput"
            matInput formControlName="sampleInput"
            [errorStateMatcher]="matcher"
            (input)="sampleForm.controls['sampleInput'].updateValueAndValidity()" >

但是到目前为止，他们都没有工作。我还有其他选择吗？

验证带有角度6的虚拟键盘的输入

0 个答案: