So markieren Sie tief geschachtelte FormArray-Felder als schmutzig oder berührt (Formularüberprüfung) in eckig 2

Question

Versuchen, tief verschachtelte Formularfeldfelder als schmutzig zu markieren und Fehlermeldungen auf dem Formular anzuzeigen, aber nichts scheint zu funktionieren. Code unten.

Die Json represensation der Form unter

{ 
    "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": "" 
      }] 
     }] 
    }] 
    } 
} 

Die folgenden der FormGroup ist

_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: "" 
    }) 
} 

Das Problem ist jetzt i search_criteria und pattern_value1 als berührt oder verschmutzt markieren möchten wenn das Formular gesendet wird, ohne dass die Formularfelder berührt wurden. dh. berührt/markiert die Formularfelder als berührte/schmutzige in der Komponente.

Habe alles versucht, was ich kann, aber ohne Erfolg. Das habe ich jetzt.

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

Jede Hilfe wird sehr geschätzt. Danke

Answer 1

Sie können die folgenden Zeilen verwenden, um zu erreichen, und Sie müssen diese Zeilen platzieren, nachdem das _formular definiert ist.

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

Zwei Eigenschaften der Steuerelemente, die verwendet wird, um den Zustand der Steuerung zu überprüfen sind

1. unberührten
2. unberührt

Source

Dies funktioniert und die Eigenschaften sind wie im Screenshot der console.log von einem For gezeigt MGROUP Objekt

Answer 2

Zur Vereinfachung ich eine Hilfsfunktion alle möglichen 4 Zustände mit Optionen

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