Как проверить флажки, используя реактивную форму в угловых 6 - PullRequest
Новая
       32

Как проверить флажки, используя реактивную форму в угловых 6

0 голосов
/ 25 сентября 2019

Пытался проверить флажки с помощью реактивной проверки формы, но не работает. Как выбрать проверку всех флажков. Если кто-нибудь поможет мне решить эту проблему?

app.component.html: 

<form (ngSubmit)="onSubmit()" novalidate [formGroup]="fg">
      <div><input type="text" formControlName="firstName" class="form-control" placeholder="First name"></div>

      <div formArrayName="bUnits">
        <div *ngFor="let unit of fg.controls.bUnits.controls; let i = index;">
          <p>Unit {{ i + 1 }}</p>
          <div>
            <label>
              <input type="checkbox" [formControlName]="i" [value]="businessUnits[i].value">
              {{businessUnits[i].name}}
            </label>
          </div>
        </div>
      </div>

      <button type="submit">Submit</button>
      <p>You have selected all checkboxes ::: {{ fg.valid }}</p>
</form>

Как применить красный цвет текста для ng-недопустимого для div, а не для класса ввода. 

<div _ngcontent-c20="" class="main ng-invalid ng-dirty ng-touched" formarrayname="bUnits" ng-reflect-name="bUnits">
    <p _ngcontent-c20="">Unit 1</p>
    <input _ngcontent-c20="" type="checkbox" ng-reflect-name="0" value="1" class="ng-pristine ng-invalid ng-touched">BU 1 
</div>

app.component.css: 

main.ng-invalid{
color:red;
}

Для полного кода и демонстрационной версии: https://stackblitz.com/edit/angular-custom-form-validation-d9zuvd?file=app/app.component.ts

1 Ответ

0 голосов
/ 25 сентября 2019

Вам нужно вызвать свой метод, чтобы вернуть ValidatorFn, например: 

this.fg = this.fb.group({
      firstName: ['Tiep Phan', [Validators.required]],
      bUnits: this.fb.array(
        this.businessUnits.map(() => this.fb.control('')),
        this.allcheckboxesSelect()
      )
    });

Демо: https://stackblitz.com/edit/angular-custom-form-validation-f3wbsn?file=app/app.component.ts

Кстати, вы можете извлечь метод в функцию, чтобы уменьшить сложность: 

function allcheckboxesSelect(formArray: FormArray) {
 const totalSelected = formArray.controls
   .map(control => control.value)
   .reduce((prev, next) => next ? prev + next : prev, 0);
 return totalSelected >= formArray.length ? null : { required: true };
}

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 fg: FormGroup;
 businessUnits: any[] = [];

 constructor(private fb: FormBuilder) { }

 ngOnInit() {
   // do some stub to grab data
   this.businessUnits = [
     { name: 'BU 1', value: "1" },
     { name: 'BU 2', value: "2" },
     { name: 'BU 3', value: "3" }
   ];
   this.fg = this.fb.group({
     firstName: ['Tiep Phan', [Validators.required]],
     bUnits: this.fb.array(
       this.businessUnits.map(() => this.fb.control('')),
       allcheckboxesSelect
     )
   });

 }

 onSubmit() {
   console.log(this.fg);
 }

}

Демонстрация: https://stackblitz.com/edit/angular-custom-form-validation-qr4vtc?file=app/app.component.ts

Или с использованием встроенной функции проверки: 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  fg: FormGroup;
  businessUnits: any[] = [];

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // do some stub to grab data
    this.businessUnits = [
      { name: 'BU 1', value: "1" },
      { name: 'BU 2', value: "2" },
      { name: 'BU 3', value: "3" }
    ];
    this.fg = this.fb.group({
      firstName: ['Tiep Phan', [Validators.required]],
      bUnits: this.fb.array(
        this.businessUnits.map(() => this.fb.control('', Validators.requiredTrue))
      )
    });

  }

  onSubmit() {
    console.log(this.fg);
  }

}

Демонстрация со стилем для каждого элемента управления, когда он недействителен:

https://stackblitz.com/edit/angular-custom-form-validation-f1g1j8?file=app/app.component.css

...