如何将深嵌套的FormArray字段标记为脏或触摸（表单验证）的角度2

Question

尝试将深层嵌套表单数组字段标记为脏并在表单上显示错误消息，但似乎没有任何效果。代码如下。

表格的Json代表如下

{ 
  "custom_label_mappings": { 
     "store_id": "", 
     "custom_labels": [{ 
          "title": "", 
          "custom_label_name": "", 
          "custom_label_patterns": [{
              "custom_label_value": null, 
              "overwrite_existing_value": true,                                                    
              "custom_label_conditions": [{ 
                  "logical_operator": "and", 
                  "search_criteria": "", 
                  "operator_rule": null,
                  "pattern_value1": "", 
                  "pattern_value2": "" 
           }] 
        }] 
     }] 
  } 
}

以下是FormGroup

_form: FormGroup

setCustomLabels(){
    this._form = this._fb.group({
        custom_label_mappings: this._fb.group({
            store_id: ['', [Validators.required]],
            custom_labels: this.buildCustomLabelsArray()
        })
    });
}

buildCustomLabelsArray(): FormArray{
    this.custom_labels = this._fb.array([
        this.buildCustomLabelsGroup()
    ]);

    return this.custom_labels;
}

buildCustomLabelsGroup(): FormGroup {
    return this._fb.group({
        title: ['', Validators.minLength(1)],
        custom_label_name: '',
        custom_label_patterns: this.buildCustomLabelsPatternsArray()
    })
}

buildCustomLabelsPatternsArray(): FormArray{
    this.custom_label_patterns =  this._fb.array([
        this.buildCustomLabelsPatternsGroup()
    ])

    return this.custom_label_patterns;
}

buildCustomLabelsPatternsGroup(): FormGroup{
    return this._fb.group({
        custom_label_value: [],
        overwrite_existing_value: true,
        custom_label_conditions: this.buildCustomLabelsConditionsArray()
    })
}

buildCustomLabelsConditionsArray(): FormArray{
    this.custom_label_conditions =  this._fb.array([
        this.buildCustomLabelsConditionsGroup()
    ])

    return this.custom_label_conditions;
}

buildCustomLabelsConditionsGroup(): FormGroup{
    return this._fb.group({
        logical_operator: ["and"],
        search_criteria: ['', Validators.required],
        operator_rule: [],
        pattern_value1: ['', Validators.required],
        pattern_value2: ""
    })
}

现在问题是我想在提交表单时将 search_criteria 和 pattern_value1 标记为触摸或脏，而未触及表单/表单字段。即。触摸/标记组件中触摸/脏的表单字段。

尝试了所有我能做但无济于事的事。 这就是我现在所拥有的。

checkFormValidity(){
    const fmCtrl = (<any>this._form);
    const clmCtl = fmCtrl.controls.custom_label_mappings
    const clCtl = clmCtl.controls.custom_labels

    Object.keys(this._form.controls).forEach(key => {
        this._form.controls[key].markAsDirty();
    });

    Object.keys(clmCtl.controls).forEach(key => {
        clmCtl.controls[key].markAsDirty();
    });

    Object.keys(clCtl.controls).forEach(key => {
        clCtl.controls[key].markAsDirty();
        const clpCtl = clCtl.controls[key].controls['custom_label_patterns'];

        Object.keys(clpCtl.controls).forEach(key => {
            clpCtl.controls[key].markAsDirty();
            const clcCtl = clpCtl.controls[key].controls['custom_label_conditions'];

            Object.keys(clcCtl.controls).forEach(key => {
                console.log(clcCtl.controls[key])
                clcCtl.controls[key].markAsDirty();
            });
        });
    });
}

任何帮助将不胜感激。谢谢

Answer 1

为了简化我做了一个辅助函数，将所有4个状态设置为选项

export class Helpers {
/**
   * Loop and touch all it has
   *
   * @param {FormGroup} formGroup
   * @param func << function name: [markAsTouched, markAsUntouched, markAsDirty, markAsPristine, markAsPending
   * @param opts
   *
   */
  public static touchAll(formGroup: FormGroup|FormArray, func = 'markAsDirty', opts = {onlySelf: false}): void {
    mapValues(formGroup.controls, (c, i) => {
      if (c instanceof FormGroup || c instanceof FormArray)
        Helpers.touchAll(c, func, opts);
      else
        c[func](opts);
    })
  }
}

Answer 2

您可以使用以下行来实现，并且您需要在定义_form之后放置这些行。

this._form.controls.custom_labels.custom_labels._pristine=true
this._form.controls.custom_labels.pattern_value1._pristine=true

用于检查控件状态的控件的两个属性是

1. 原始
2. 不变

Source

这有效，属性如FormGroup对象的console.log的屏幕截图所示