angular - Πρόβλημα με τις επικυρώσεις μέσα σε ένα FormArray

Είμαι νέος στο Angular και αυτή τη στιγμή φτιάχνω μια ιστοσελίδα σε Angular. Αντιμετωπίζω ένα πρόβλημα που δεν μπορώ να λύσω με την τεκμηρίωση του Angular και δεν καταλαβαίνω ακριβώς τι συμβαίνει πίσω από το πρόβλημα.

Με λίγα λόγια, έχω ένα formArray(updateAddress) που περιέχει ένα formGroup και μερικά formControl μέσα και δυσκολεύομαι να κάνω τους ελέγχους εγκυρότητας για αυτό.

Κώδικας HTML:

<form [formGroup]="profileForm">
<div *ngFor="let add of updateAddress().controls; let addIndex=index">
    <div formArrayName="updateAddress">
      <div [formGroupName]="addIndex">
        <label>
          Rua:
          <input type="text" formControlName="address">
        </label>
        <div
          *ngIf="profileForm.get('add.address')?.invalid && (address.get('add.address')?.dirty || profileForm.get('add.address')?.touched)">
          <div *ngIf="profileForm.get('add.address')?.errors?.required">
            Tem de escrever a rua da sua loja.
          </div>
        </div>
<button (click)="removeAddress(addIndex)">Remover</button>
      </div>
    </div>
  </div>
  <button type="button" (click)="addAddress()">Adicionar Morada</button>
</form>

Κωδικός TS:

  profileForm: FormGroup;

  control: any;

  
  constructor(
              public formBuilder: FormBuilder,
              private cd: ChangeDetectorRef
             ) {

    this.profileForm = this.formBuilder.group({
      file: [''],
      name: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z ]*')]),
      email: new FormControl('',  [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]),
      password: new FormControl('',[Validators.required, Validators.minLength(7),Validators.pattern('(?=.*[A-Za-z])(?=.*[0-9])(?=.*[$@$!#^~%*?&,.<>"\'\\;:\{"}"["]"|"+"-"="_")"(")"`"/""]])[A-Za-z0-9\d$@].{7,}')]),
      password2: new FormControl('', Validators.required),
      nif: new FormControl('',[Validators.required, Validators.pattern('\\d{9}')]),
      birthDate: new FormControl('',[Validators.required, Validators.pattern("^(0[1-9]|[12][0-9]|3[01])[/.](0[1-9]|1[012])[/.](19|20)\\d\\d$") ]),
      phoneNumber: new FormControl('', [Validators.required, Validators.pattern('\\d{9}')]),
      updateAddress: new FormArray([], Validators.required)
    });
   }

  updateAddress(): FormArray {
        return this.profileForm.get("updateAddress") as FormArray
  }

  newAddress(): FormGroup {
      return this.formBuilder.group({
        address: new FormControl('', Validators.required),
        address2: new FormControl('', Validators.required),
        postalCode: new FormControl('', Validators.required),
        city: new FormControl('', Validators.required),
        area: new FormControl('', Validators.required)
      })
  }

  addAddress() {
      this.updateAddress().push(this.newAddress());
  }
  
  removeAddress(addIndex:number) {
    this.updateAddress().removeAt(addIndex);
  }

Πραγματικά δεν μπορώ να λύσω το πρόβλημα σε αυτήν την επαλήθευση γιατί η επαλήθευση φαίνεται να περνάει αλλά δεν εμφανίζεται κανένα σφάλμα στη σελίδα ιστότοπου, επίσης δεν ξέρω αν προσεγγίζω αυτό με σωστό τρόπο ή όχι.

εικόνα που αποδεικνύει ότι η επικύρωση λειτουργεί επειδή η υποβολή είναι απενεργοποιημένη αλλά δεν στέλνεται σφάλμα όταν θα έπρεπε να στείλει κάτω από το πεδίο «Rua»

Αν κάποιος μπορεί να με καθοδηγήσει ή να με βοηθήσει, θα το εκτιμήσω με χαρά!

ΕΝΗΜΕΡΩΣΗ

Όπως είπα, νομίζω ότι η επικύρωση λειτουργεί στο παρασκήνιο αλλά το κείμενο σφάλματος που θα έπρεπε να εμφανιστεί απλά δεν εμφανίζεται επειδή δεν καταλαβαίνω το ngIf σωστά (νομίζω)

Απάντηση #1

Ορισμένα σημεία που πρέπει να σημειωθούν

Μπορείτε να ξεκινήσετε τη φόρμα σας όπως παρακάτω χρησιμοποιώντας FormBuilder

    this.profileForm = this.formBuilder.group({
      file: [''],
      name: ['', [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
      email: ['',  [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]],
      password: ['',[Validators.required, Validators.minLength(7),Validators.pattern('(?=.*[A-Za-z])(?=.*[0-9])(?=.*[$@$!#^~%*?&,.<>"\'\\;:\{"}"["]"|"+"-"="_")"(")"`"/""]])[A-Za-z0-9\d$@].{7,}')]],
      password2: ['', Validators.required],
      nif: ['',[Validators.required, Validators.pattern('\\d{9}')]],
      birthDate: ['',[Validators.required, Validators.pattern("^(0[1-9]|[12][0-9]|3[01])[/.](0[1-9]|1[012])[/.](19|20)\\d\\d$") ]],
      phoneNumber: ['', [Validators.required, Validators.pattern('\\d{9}')]],
      updateAddress: this.formBuilder.array([], Validators.required)
    });

    newAddress(): FormGroup {
      return this.formBuilder.group({
        address: ['', Validators.required],
        address2: ['', Validators.required],
        postalCode: ['', Validators.required],
        city: ['', Validators.required],
        area: ['', Validators.required]
      })
  }

Μπορείτε επίσης να αλλάξετε το updateAddress σε μια getter

  get updateAddress(): FormArray {
    return this.profileForm.get("updateAddress") as FormArray
  }

Στο πρόβλημα

Πιστεύω ότι το πρόβλημα είναι στο πώς προσπαθείτε να ανακτήσετε τα σφάλματα

Δοκιμάστε να χρησιμοποιήσετε formGroup.get('control_name').errors στην περίπτωσή σας, η επαλήθευση εφαρμόζεται στα controls μέσα στο formArray οπότε χρειάζεται να έχουμε πρόσβαση σε αυτό και να πάρουμε τα σφάλματα, κάτι σαν

add.get('address').errors?.required

Παρακάτω είναι ένα δείγμα HTML.

  <ng-container formArrayName="updateAddress">
    <div *ngFor="let add of updateAddress.controls; let addIndex=index">
      <div [formGroupName]="addIndex">
        <label>
          Rua:
          <input type="text" formControlName="address">
        </label>

        <div *ngIf="add.get('address').invalid && (add.get('address').dirty || add.get('address').touched)">
          <div *ngIf="add.get('address').errors?.required">
            Tem de escrever a rua da sua loja.
          </div>
        </div>
        <button (click)="removeAddress(addIndex)">Remover</button>
      </div>
    </div>
    <button type="button" (click)="addAddress()">Adicionar Morada</button>
  </ng-container>

Μπορείς να ρίξεις μια ματιά σε αυτό το demo του Stackblitz

Επεξεργασία

Για να αρχικοποιήσετε μια τιμή για τη φόρμα μπορείτε να χρησιμοποιήσετε setValue ή patchValue. Κάτι σαν παρακάτω

   this.updateAddress.at(0).setValue({
      address: "My Address",
      address2: "My Address 2",
      postalCode: "77777",
      city: "Helsinki",
      area: "Some street"
    });

Δες αυτή την επίδειξη

Απάντηση #2

Χρήση του Validators.required στο επίπεδο του FormArray. Σημαίνει ότι το μέγεθος του FormArray πρέπει να είναι μεγαλύτερο από μηδέν.

Οι μεμονωμένοι επικυρωτές στα πεδία FormGroup του newAddress όπως address, address2 ελέγχουν κάθε πεδίο.

Για να δείτε καλύτερα τι συμβαίνει, προσθέστε αυτή τη γραμμή μέσα στον βρόχο πίνακα της φόρμας:

 <pre> {{ 'invalid: ' + add.invalid + ', dirty: ' + add.dirty + ', touched: ' + add.touched }} </pre>

εμφάνιση επίσης όλων των σφαλμάτων πίνακα της φόρμας

{{ profileForm.controls['updateAddress'].errors | json }}

Stackblitz