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代码，复选框在代码的末尾，验证器用于housenumber输入

<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>

---

您不能从custome validator访问另一个表单控件。您必须创建custome表单validator

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 })
  }

---

我做了以下类似的事情：

如上所述，只有当

发送通知

单选按钮设置为text时，我才需要手机

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

  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));

---

您现在遇到了什么错误？没有值。没有错误。它只是不起作用：with.value error:ncaught（承诺中）：TypeError:Cannot read null TypeError的属性'value'：Cannot read FormControl.validateCheckbox[作为验证器]

const check=control.root.get（'checkbox:checked'）尝试使用此项。您无法访问另一个表单控件表单自定义验证程序您必须创建表单组验证程序，但如何仅在选中复选框时设置必填字段？这将解决问题，但
清除验证程序
将清除from控件上的所有其他验证程序我在何处设置反编码订阅按钮？目前正在尝试您的解决方案。我对您的代码做了一些更改，现在可以使用了。谢谢你的帮助！将我的解决方案发布给其他人see@JorenVermeir是的，这对您来说很有用，但是formGroup Validator更干净，它是返回验证错误的地方，而不是设置并清除验证，这是我的观点
this.customerForm.get('notification').valueChanges
  .subscribe(value => this.setNotification(value));