反应性表单控件不适用于布尔值,因为未更新值

正义者

我正在尝试验证一组复选框,以便它们仅在选择了全部四个时才进行验证。正在发生的事情是“ this.dataService.minRequired”变量正在服务中更新,但是验证状态似乎没有改变。我将其移至我的服务部门以为它将解决此问题,但是当变量在控制器中时,我也遇到了同样的问题。

我使用的复选框类型没有“已检查”值或访问复选框状态的任何其他方式,因此提供了所有解决方法。我不能放弃他们,所以我正在这些范围内寻求解决方案。

card.component.html:

<xyz-checkbox-group orientation="vertical" ngDefaultControl [formControl]="newCardForm.get('eligibility')">
                    <div style="float: left; width: 45%;">
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag1" id="checkbox1" (change)="checker()">Account is Open and in Good Standing</xyz-checkbox>
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag2" id="checkbox2" (change)="checker()">Balance Less Than 30 Days Past Due</xyz-checkbox>
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag3" id="checkbox3" (change)="checker()">Annual Income - $200,000.00 (minimum)</xyz-checkbox>
                            <xyz-checkbox ngDefaultControl [(checked)]="checkedFlag4" id="checkbox4" (change)="checker()">Current Card Limit - $5,000.00</xyz-checkbox>
                        <display-error *ngIf="(submitted && newCardForm.get('eligibility').invalid) || (submitted && newCardForm.get('eligibility').invalid && newCardForm.get('eligibility').dirty)  || (submitted && newCardForm.errors.checks)" 
                        error="Only 'Client is a Student' is optional." class="alertLabel"></display-error>

card.component.ts:

  checkedFlag1: boolean;
  checkedFlag2: boolean;
  checkedFlag3: boolean;
  checkedFlag4: boolean;

  ngOnInit() {
    this.forms = new FormArray([
      this.accountDetailsForm = new FormGroup({
        productGroup: new FormControl('', {validators: Validators.required}),
      }), 
      this.newCardForm = new FormGroup({
        address: new FormControl('', {validators: Validators.required}),
        eligibility: new FormControl('', {validators: Validators.required})
        }, this.validateCheckboxes(this.dataService.minRequired)),
      ]);
  }

  public checker(){
    let checked = 0;
    this.checkboxArray = [];
    this.checkboxArray.push(
      this.checkedFlag1, this.checkedFlag2, this.checkedFlag3, this.checkedFlag4
    )

    for(let i  = 0; i < this.checkboxArray.length; i++){
      if(this.checkboxArray[i] == true){
        checked++; 
      }
    }

    if (checked == 4) {
      this.dataService.minRequired = true;
    } else {
      this.dataService.minRequired = false;
    }
  }

  public validateCheckboxes(boolean): ValidatorFn{
    return function validate (formGroup: FormGroup){

      console.log("entered with: " + boolean)
      if(!boolean){
        return {
          checks: true
        };
      }
      return null;
    }
  }
tmptplayer

创建的函数对服务状态没有反应时,将创建要传递的参数。当您输入验证功能时,相当于

this.validateCheckboxes(false)

您要编写一个异步函数,该函数返回一个可观察值。然后,您可以将minRequired更改为可观察的对象,当满足正确的条件时,该对象将发出“ true”,然后将其合并到异步验证器中以引发错误或基于当前状态调用true。

可以在angular文档的自定义验证器部分中找到更多信息:https : //angular.io/guide/form-validation

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 5 BehaviorSubject不适用于布尔值

RadioButton ngmodel不适用于布尔值

Mongoose.js查询条件不适用于布尔值和对象ID搜索

OrderBy数字和thenBy布尔值不适用于List

插值不适用于Angular

反应性表单自定义验证不适用于Angular 7的Blur

布尔值,因为方法参数未更改状态

适用于DynamoDb布尔值和列表数据类型的AWS CloudFormation AttributeType

该属性管道不适用于类型“ OperatorFunction <未知,[未知,布尔值,任何]>”

C#Automapper:空布尔值不适用于其他类成员名称

JSON_EXTRACT不适用于BigQuery中的布尔值[已解决]

自动装箱不适用于布尔值

为什么〜(true ^ true)不成立?布尔运算符(否定)适用于`unsigned char`,而不适用于布尔值吗?(C ++)

CALayer值不适用于UIControl

布尔值上的AngularJS筛选器仅适用于true

Java无法解析为变量或不适用于参数(布尔值)

属性默认值不适用于新控件

自动 jquery 重新提交适用于表单中的硬编码值,但不适用于 PHP 变量

离子:离子无线电值不适用于 formBuilder。名称为“ ”的表单控件没有值访问器

全局布尔值仅适用于片段而不是实际活动

Kotlin - 布尔值如何?in if 表达式适用于字节码

布尔值的反应 setState 不更新

从脚本引用的布尔值未更新?

NumPy 中的布尔索引比较不适用于 NaN 值

Django 表单:初始字段值不适用于 @staticmethod 与未绑定函数

布尔值不适用于 If 语句(Javascript)

反应式表单验证不适用于 ControlValueAccessor

反应选择默认值不适用于多个选择

反应式表单不适用于 ControlValueAccessor