Как запустить проверку и получить результат проверки после отправки формы в Angular? - PullRequest
Новая
       37

Как запустить проверку и получить результат проверки после отправки формы в Angular?

0 голосов
/ 15 октября 2019

У меня есть эта группа форм: 

this.form = this.fb.group({
  id: [],
  active: [true],
  name: [''],
});

и эта функция отправки формы: 

onSubmit(submitForm: FormGroup) {
  this.submitForm.controls['name'].setValidators([MyValidators.unique(`name`, () => {
     return this.service.checkNameUnique(this.submitForm.value.name, this.labelFg.value.id);
  })]);
}

Я не установил проверку формы при инициализации, поскольку эта форма будет проверяться толькопосле того, как я нажал кнопку отправки. Поэтому я использую функцию setValidators для установки валидации в функции onSubmit.

Но вопрос в том, как мне запустить эту валидацию и получить результат валидации?

Ответы [ 3 ]

2 голосов
/ 15 октября 2019

Disclamer Как говорит Эндрю, из Angular 8 возможно использование {updateOn:'submit'} с помощью formBuilder, извиняясь за неудобства

Вы можете использовать "конструкторы" элементов управления FormGroup и Form, не formBuilder ), тогда вы можете добавить {updateOn: 'submit'}, см. документы: проверка форм 

this.form = new FormGroup({
  id: new FormControl('',Validators.required),
  active: new FormControl(true,Validators.requiredTrue),
  name: new FormControl('',
        {validators:Validators.required,
         asyncValidators:MyValidators),
},{updateOn:'submit'});

Да, может только сделать это, используя конструкторы FormGroup, но вы можете заметить, что использование FormBuilder

Update stackblitz example

не очень отличается.
1 голос
/ 15 октября 2019

Ничто не мешает вам использовать FormBuilder API и передавать AbstractControlOptions . Вы можете передать эти параметры элементам управления и / или группе. 

this.formGroup = this.fb.group({
  id: ['', [Validators.required]],
  name: ['', {validators: ..., asyncValidators: ..., updateOn: ...}],
}, { updateOn: 'submit' });

Stackblitz 

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators} from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
      <input type="text" placeholder="Id" formControlName="id" />
      <input type="text" placeholder="Name" formControlName="name" />

      <br/>
      <br/>
    <h3>Value</h3>
      {{ formGroup.value | json }}
    <h3>Valid</h3>
      {{ formGroup.valid | json }}

      <br/>
      <br/>
    <button type="submit" >Submit</button>

  </form>
  `
})
export class AppComponent  {
  formGroup: FormGroup

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formGroup = this.fb.group({
      id: ['', [Validators.required]],
      name: [''],
    }, { updateOn: 'submit' });
  }

  onSubmit() {
    console.log('onSubmit')
    console.log(this.formGroup.value)
    console.log(this.formGroup.valid)
  }
}
1 голос
/ 15 октября 2019

Попробуйте это 

  this.submitForm.controls['name'].setValidators([MyValidators.unique(`name`, () => {
     return this.service.checkNameUnique(this.submitForm.value.name, this.labelFg.value.id);
  })]);
this.submitForm.controls["name"].updateValueAndValidity();

angular-setvalidators

Обновление Проверьте этот блог , чтобы получить лучшеепример с угловыми асинхронными валидаторами

...