Проверка правильности ввода с виртуальной клавиатурой на угловых 6 - PullRequest
Новая
       8

Проверка правильности ввода с виртуальной клавиатурой на угловых 6

0 голосов
/ 28 ноября 2018

В форме под углом 6 я использовал " jQuery Bootstrap Touch Keyboard (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() при событиях «change» или «input», например: 

<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()" >

Но пока ни один из них не работал.Есть ли другой вариант, который я должен рассмотреть?

...