我的解决方案

Question

我正在Angular中创建自定义验证器。验证程序的目的是，当选中复选框时，它使某些字段必填。目前，始终需要它验证的输入，而不仅仅是复选框被选中时。这是我的验证者代码：

import { FormControl, AbstractControl } from "../../../node_modules/@angular/forms";

   export function validateCheckbox(control:AbstractControl){
    const val = control.value;
    const check = control.root.get('checkbox'); //i think the problem is here: if i do .value i get an error

    if (check) {
        if (val === null || val === undefined || val === '') {
            return {
                validate: {
                  valid: false
                }
              };
        }else{
            return null;
        }
    }else{
        return null;
    }
}

使用验证程序的我的组件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Customer } from '../account/models/customer.model';
import { validateCheckbox } from './customValidators';


@Component({
  selector: 'caredeal-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class RegistrationComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      name:['',[Validators.required,Validators.minLength(2)]],
      firstName:['',[Validators.required,Validators.minLength(2)]],
      email:['', [Validators.required,Validators.minLength(2)]],
      telephone:['',[Validators.required,Validators.minLength(9)]],
      mobilePhone:['',Validators.minLength(10)],
      type:[''],
      checkbox:[false],
      companyName:['',Validators.minLength(2)],
      rizivNumber:[''],
      taxNumber:['',Validators.minLength(2)],
      streetName:['', Validators.required],
      houseNumber:['',validateCheckbox],
      bus:[''],
      zipCode:['',[Validators.required,Validators.minLength(4)]],
      place:['',[Validators.required,Validators.minLength(2)]]
    })
   }

  ngOnInit() {
  }

}

我的html代码，复选框位于代码的末尾，验证器用于门牌号输入。

<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit()">
        <div class="container-fluid">
            <h3>Account informatie</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" formControlName="name" placeholder="Naam">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" formControlName="firstName" placeholder="Voornaam">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                        <input type="email" class="form-control" formControlName="email" placeholder="Email">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                        <input type="tel" class="form-control" formControlName="telephone" placeholder="Telefoon">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                        <input type="tel" class="form-control" formControlName="mobilePhone" placeholder="GSM">
                    </div>
                    <div class="input-group">
                        <label for="sel1">Type klant:</label>
                        <select class="form-control" formControlName="type">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Bedrijfsgegevens</h3>
            <div class="row">
                <div class="col-xs-12">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="text" class="form-control" formControlName="companyName" placeholder="Bedrijfsnaam">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="number" class="form-control"formControlName="rizivNumber" placeholder="RIZIV-nummer">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="text" class="form-control" formControlName="taxNumber" placeholder="BTW-nummer">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Afleveradres</h3>
            <div class="row">
                <div class="col-xs-12">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                        <input type="text" class="form-control" formControlName="streetName" placeholder="Straatnaam">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
                        <input type="number" class="form-control" formControlName="houseNumber" placeholder="Huisnummer">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="bus" placeholder="Bus">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="number" class="form-control" formControlName="zipCode" placeholder="Postcode">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="place" placeholder="Plaats">
                    </div>
                    <div class="input-group">
                        <input type="checkbox" formControlName="checkbox"  name="">Facturatie adres is verschillend van afleveradres<br>
                    </div>
                    <div class="input-group">
                        <button type="submit" [disabled] = "!registerForm.valid" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

</form>

我的解决方案

看起来您不需要自定义验证程序。订阅该复选框，然后根据该复选框的值更新表单是比较容易的。现在这是我的组件代码：

export class RegistrationComponent implements OnInit {
  registerForm: FormGroup;
  bool:boolean = false;
  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      name:['',[Validators.required,Validators.minLength(2)]],
      firstName:['',[Validators.required,Validators.minLength(2)]],
      email:['', [Validators.required,Validators.minLength(2)]],
      telephone:['',[Validators.required,Validators.minLength(9)]],
      mobilePhone:['',Validators.minLength(10)],
      type:[''],
      checkbox:[false],
      companyName:['',Validators.minLength(2)],
      rizivNumber:[''],
      taxNumber:['',Validators.minLength(2)],
      streetName:['', Validators.required],
      houseNumber:[''],
      bus:[''],
      zipCode:['',[Validators.required,Validators.minLength(4)]],
      place:['',[Validators.required,Validators.minLength(2)]]
    })
    this.formControlValueChanged();
   }

   setNotification(): void {
    this.bool = !this.bool;
    if(this.bool){
      this.registerForm.root.get('houseNumber').setValidators(Validators.required);
    }else{
      this.registerForm.root.get('houseNumber').clearValidators();
    }
    this.registerForm.get('houseNumber').updateValueAndValidity();
  }

  ngOnInit() {
  }

  formControlValueChanged() {
    this.registerForm.get('checkbox').valueChanges.subscribe(
        (mode: string) => {
            this.setNotification();
        });
}
}

Answer 1

您无法从定制验证器访问另一个表单控件，而必须创建定制表单验证器

export  function validateCheckbox(fg) {
  if (fg.get('checkbox').value) {
    let val = fg.get('text').value;
    if (val === null || val === undefined || val === '') {
      return {
        validate: {
          valid: false
        }
      };
    } else { // text control has a value
      return null;
    }
  } else { // checkbox value is false 
    return null;
  }
}

组件

  form: FormGroup;
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      checkbox: [false],
      text: ['']
    }, { validator: validateCheckbox })
  }

stackblitz example

FormBuilder/Group

Answer 2

我在下面做了类似的事情：

在上述情况下，仅当Send Notifications单选按钮设置为文本时，才需要使用手机。

我使用以下代码执行此操作：

  setNotification(notifyVia: string): void {
    const phoneControl = this.customerForm.get('phone');
    if (notifyVia === 'text') {
      phoneControl.setValidators(Validators.required);
    } else {
      phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
  }

因此，无需构建验证器，而是仅在字段上添加或清除所需的验证器。在我的示例中，我只为一个控件（phoneControl）设置了验证器，但是您可以轻松地为任意数量的控件设置验证器。

每次单选按钮更改时，都会使用以下代码调用此代码。相反，您需要在每次选中复选框时调用setNotification：

this.customerForm.get('notification').valueChanges
  .subscribe(value => this.setNotification(value));

角度自定义验证器复选框

我的解决方案

2 个答案: