Проверка формы FormGroup для нескольких - PullRequest
Новая
       8

Проверка формы FormGroup для нескольких

0 голосов
/ 04 июля 2019

У меня есть группа форм, которая выбирает все флажки, которые выбрал пользователь, и отправляет их по нажатию кнопки. Но эта кнопка должна быть отключена, когда флажки не установлены. Он работает при загрузке, но как только пользователь проверяет и снимает флажок, он остается действительным и не обновляет statusChange формы. HTML-код: 

<form [formGroup]="myform">
    <div *ngFor="let item of list$ | async">
        <input type="checkbox"> {{item.id}}<br>
    </div>
</form>
<button type="button" (click)="continue()" [disabled]="disableBtn$ | async" > Continue</button>

Угловой код: 

this.myform = this.fb.group({
    listOfSelected: this.fb.array([], Validators.minLength(1))
});

this.myform.statusChanges
    .pipe(distinctUntilChanged())
    .subscribe((status: string) => console.log(status))

1 Ответ

1 голос
/ 04 июля 2019

Я использовал allOf валидатор @rxweb/reactive-form-validators в моем проекте.Этот валидатор используется в ситуации, когда пользователь должен выбрать по крайней мере все из упомянутых флажков.Его можно использовать непосредственно в компоненте без создания какой-либо пользовательской функции проверки.

Вам просто нужно упомянуть RxwebValidators.allOf валидатор в вашем файле ts при создании группы форм следующим образом: 

  ngOnInit() {
            this.employeeInfoFormGroup = this.formBuilder.group({
                department:[''],
                projectDomains:['', RxwebValidators.allOf({matchValues:["ECommerce", "Banking","Educational","Gaming"]})], 
            });
        }

Выможно установить errorMessage в ReactiveFormConfig в вашем app.component.ts следующим образом: 

ReactiveFormConfig.set({"validationMessage":{"allOf":"You must select all options"}});

Вот полный HTML-код: 

<div>
    <form [formGroup]="employeeInfoFormGroup">
      <div class="form-group">
        <label>Project Domains</label>
        <div class="form-check" *ngFor="let tag of projectDomainsArray; let i = index;">
          <h4>
            <input (click)="addProjectDomain($event.target,i)"  type="checkbox" value="{{tag}}" /> {{tag}}
          </h4>
        </div>
        <br>
        <small class="form-text text-muted">You must select atleast all option provided in the config parameters.</small><br>
        <small class="form-text text-danger" *ngIf="employeeInfoFormGroup.controls.projectDomains.errors">{{employeeInfoFormGroup.controls.projectDomains.errors.allOf.message}}</small><br>
      </div>
      <button [disabled]="!employeeInfoFormGroup.valid" class="btn btn-primary">Submit</button>
    </form>
  </div>

Вот полный компонент: 

  import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"
import { RxFormBuilder, RxwebValidators } from '@rxweb/reactive-form-validators';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-allOf-add-validator',
  templateUrl: './all-of-add.component.html'
})
export class AllOfAddValidatorComponent implements OnInit {
  employeeInfoFormGroup: FormGroup
  projectDomains: string[] = [];
  projectDomainsArray: string[] = ["ECommerce", "Banking", "Educational", "Gaming"];

  constructor(
    private formBuilder: RxFormBuilder, private http: HttpClient) { }

  ngOnInit() {
    this.employeeInfoFormGroup = this.formBuilder.group({
      department: [''],
      projectDomains: ['', RxwebValidators.allOf({ matchValues: ["ECommerce", "Banking", "Educational", "Gaming"] })],
    });
  }

  addProjectDomain(element: any, index: number) {
    var indexOf = this.projectDomains.indexOf(element.value);
    element.checked ? this.projectDomains.push(element.value) : this.projectDomains.splice(indexOf, 1);
    this.employeeInfoFormGroup.controls.projectDomains.setValue(this.projectDomains);
  }
}

Рабочий пример всего валидатора

...