Angolare di validazione personalizzati per FormArray campi (Forma Reattiva)

Question 1

Sono nuovo di Angolare e vorrei controllare come faccio ad andare sull'esecuzione di campo personalizzato di convalida per FormArray?

Il FormArray è dinamico, dove si può spingere o rimuovere FormGroup elementi. Il FormGroup consiste in campo1, campo2, campo3. Se il campo non è null, gli altri campi devono essere impostati con i validatori.richiesto. Il modulo sarà valida solo se tutti i campi sono null o pieno.

Grazie.

Di seguito è il codice di esempio:

formA!: FormGroup;

initializeForm(): void {
    this.formA = this.fb.group({
      item1: this.fb.array([this.createItem1()]),
      item2: this.fb.array([this.createItem2()]),
    });
  }

createItem1(): FormGroup {
   return this.fb.group({
       field1: null,
       field2: null,
       field3: null,
   });
}

Question 2

Prova in questo modo.

createItem1(): FormGroup {
  const fg = this.fb.group({
      field1: null,
      field2: null,
      field3: null,
  });
   
  const validatorFn = (control: AbstractControl): { [key: string]: any } | null => {
    const obj = fg.getRawValue();
     
    if (obj.field1 || obj.field2 || obj.field3) {
      return Validators.required(control);
    }
     
    return null;
  };
   
  for (const control of Object.values(fg.controls)) {
    control.setValidators(validatorFn);
  }

  return fg;
}

Inoltre, è necessario eseguire updateValueAndValidity() per tutti i comandi quando il tasto viene premuto.

N.F. · Answer 1 · 2021-11-25T00:55:40

Prova in questo modo.

createItem1(): FormGroup {
  const fg = this.fb.group({
      field1: null,
      field2: null,
      field3: null,
  });
   
  const validatorFn = (control: AbstractControl): { [key: string]: any } | null => {
    const obj = fg.getRawValue();
     
    if (obj.field1 || obj.field2 || obj.field3) {
      return Validators.required(control);
    }
     
    return null;
  };
   
  for (const control of Object.values(fg.controls)) {
    control.setValidators(validatorFn);
  }

  return fg;
}

Inoltre, è necessario eseguire updateValueAndValidity() per tutti i comandi quando il tasto viene premuto.

Ciao, ho riscontrato il seguente a 'fg.controlli' per questa prova. possibile consigliare? Tipo " { [chiave: string]: AbstractControl; }' deve avere un '[Simbolo.iteratore] () metodo che restituisce un iteratore.ts(2488)
Ciao, grazie per l'aiuto. Ho fatto alcune modifiche per adattarlo al mio caso d'uso e ha aggiunto ulteriore condizione per cancellare i validatori quando non è necessario. Nel complesso, funziona alla fine.

Angolare di validazione personalizzati per FormArray campi (Forma Reattiva)

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria