Angular 5 исключительно проверка на размытие? - PullRequest
Новая
       15

Angular 5 исключительно проверка на размытие?

0 голосов
/ 30 апреля 2018

Интересно, можно ли провести проверку в реактивных формах на размытие? На данный момент вы можете установить updateOn: "blur", но тогда значения полей ввода не будут обновляться при вводе. В моем случае мне нужно, чтобы значения обновлялись при каждом нажатии клавиши, потому что я делаю с ним вычисления и показываю результат пользователю. Проверка должна происходить только при размытии.

ТНХ.

EDIT:

Я использую FormBuilder, некоторые встроенные валидаторы и некоторые пользовательские валидаторы. Пример кода: 

let formToMake = {
  purpose: [null, Validators.required],
  registrationDate: this.fb.group({
    day: [null, Validators.required],
    month: [null, Validators.required],
    year: [null, Validators.required]
  }),
  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};

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

Ответы [ 3 ]

0 голосов
/ 30 апреля 2018

updateOn - это только метод доступа к свойству. Входной HTML-тег имеет привязку события с именем blur, которую можно использовать для этого удобства.

URL к официальному документу. https://angular.io/guide/user-input#on-blur

0 голосов
/ 03 мая 2018

Что я в итоге сделал:

Использование реактивных форм:

TS

это форма для создания. Мне нужно, чтобы productCost и loanAmount были проверены на размытие, но сами значения были необходимы для обновления onchange. Если вы установите updateOn: "blur", проверка происходит после события размытия, но также значения будут обновляться после события размытия. 

let formToMake = {
      productCost: new FormControl(null, {validators: Validators.required, updateOn: "blur"}),
      loanAmount: new FormControl(null, {validators: Validators.compose([Validators.required, Validators.min(2500)]), updateOn: "blur"}),
      loanLength: new FormControl(49, {validators: Validators.required, updateOn: "change"})
    };

метод handleInput :

Чтобы решить эту проблему, я просто создал обработчик события, который будет вызываться для события ввода.

TS 

handleInput(e: any) {
    this.loanAmount = e;
  }

HTML 

<input class="form__input" type="number" value="{{loanForm.get('loanAmount').value}}" id="loanAmount" formControlName="loanAmount" (input)="handleInput($event.target.value)">
0 голосов
/ 30 апреля 2018

Я полагаю, что вы ищете ng-привязку к элементу Angular. Например, вы можете привязать нажатия клавиш и размыть их следующим образом для поля ввода: 

<input type=text (blur)="validate()" (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
   // Update value of string on every keystroke
} 

validate() {
   // Validation code goes here
}

Вы также можете использовать ngModel, и тогда вам вообще не придется беспокоиться о нажатии клавиш, потому что строка будет автоматически обновляться для вас. Это будет выглядеть примерно так: 

<input [(ngModel)]="name" (blur)="validate()">

name: string;

validate() {
   // Validation code goes here
}

Поскольку вы рассматриваете использование модуля Reactive Forms и его проверку, вы можете сделать что-то вроде этого:

Шаблонный подход

<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">

Привязка ngModel будет изменять ввод при каждом нажатии клавиши, поэтому вам не придется делать это вручную. Я бы действительно предложил использовать этот подход, поскольку именно этого вы сейчас и просите.

Подход реактивных форм 

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  })
});

Ссылки: Подход SO Средний Артикул

...