“异或”中的 FormGroup 验证答案

【问题标题】：FormGroup validation in "exclusive or"“异或”中的 FormGroup 验证
【发布时间】：2019-04-15 01:40:38
【问题描述】：

我有一个由 3 个输入字段组成的 FormGroup：reservationCode、secretCode 和条形码。

字段条码就是reservationCode + '-' + secretCode。（这是因为条形码是一个可以在文本中找到的字段，可以通过复制+粘贴功能使用）

现在，使用这些字段的按钮只有在 barcode 有值或 reservationCode 和 secretCode 有值时才必须处于活动状态。

逻辑应该类似于：“barcode || reservationCode && secretCode”

这是我的 .ts 中 formGroup 的代码：

 this.voucherVerifyUserDataFormGroup = formBuilder.group({
  reservationCode: [''],
  secretCode: [''],
  barcode: ['']
});

我不知道如何管理 formControl 验证器以及是否必须创建自定义验证器。

【问题讨论】：

标签： angular typescript validation formgroups

【解决方案1】：

您可以使用 *ngIf/disabled 来实现。

<input type="button" *ngIf="isDataPresent" value="Paste">

组件：

get isDataPresent(){
  return this.voucherVerifyUserDataFormGroup.get('barcode').value || (this.voucherVerifyUserDataFormGroup.get('reservationCode').value && this.voucherVerifyUserDataFormGroup.get('secretCode').value);
}

【讨论】：

如果您使用 html 中的 [disabled]，则使用表单控件和表单组毫无意义，我想根据代码隐藏中的 formgroup.valid 字段禁用按钮

【解决方案2】：

Try this : 

    this.voucherVerifyUserDataFormGroup.valueChanges.subscribe((form : any) =>{
     //check your condition : 

    if(form.barcode != '' || (form.reservationCode != '' && form.secretCode != '')){
     this.voucherVerifyUserDataFormGroup.setErrors(null);
    }
    else
    {
     this.voucherVerifyUserDataFormGroup.setErrors({ 'invalid': true});
    }
    })

【讨论】：

这个带有一些自定义的解决方案效果很好，非常感谢
@n_denny 很高兴我能帮到你。快乐验证