web-dev-qa-db-fra.com

Angular 2 - Impossible de définir la valeur du tableau de formulaire

Je reçois cette erreur:

Il n'y a pas encore de contrôle de formulaire enregistré avec ce tableau. Si vous utilisez ngModel, vous pouvez cocher la case suivante (par exemple, utilisez setTimeout).

Lorsque vous utilisez ce code:

public settingsForm: FormGroup = this.fb.group({
  collaborators: this.fb.array([]),
  rsvp: this.fb.group({
    latestDate: ['', [Validators.required]],
    latestTime: ['', [Validators.required]],
    guestLimit: ['', [Validators.required]],
    isRSVPOpen: false,
    isGuestPlusOne: false,
    isAutoApproveToGuestlist: false,
    isOnlyFacebookRSVP: false,
    isBirthdayAndPhoneRequired: false
  }),
  tickets: this.fb.group({
    info: this.fb.group({
      closingDate: '',
      closingTime: ''
    }),
    types: this.fb.array([])
  })
});

Dans ngOnInit:

this.eventSubscription = this.af.database.object('/events/' + this.eventId)
  .filter(event => event['$value'] !== null)
  .subscribe((event: IEvent) => {

    const settings: ISettings = event.settings;
    const collaborators: ICollaborator[] = settings.collaborators;
    const rsvp: IRSVP = settings.rsvp;
    const tickets: ITickets = settings.tickets;

    this.settingsForm.setValue({
      collaborators: collaborators || [],
      rsvp: rsvp,
      tickets: {
        info: tickets.info,
        types: tickets.types || []
      }
    });
  }
);

Lorsque collaborators contient une valeur, c’est-à-dire que ce n’est ni undefined, null ni [] vide, quelque chose comme:

[
  {
    email: '[email protected]',
    role: 1
  },
  {
    email: '[email protected]',
    role: 2
  }
]

Ensuite, l'application se bloque sur la ligne setValue dans la eventSubscription.

Je ne peux pas comprendre pourquoi cela se produit.

Des idées?

angulartypescriptangular2-formsangular2-formbuilderreactive-forms
4
Chrillewoodz

Initialisez le tableau de formulaire avec le contrôle. Cela résoudrait le problème. Voir Formulaires réactifs guider si vous avez besoin de savoir comment faire cela. Si vous utilisez ngModel, il serait probablement utile de le supprimer.

1
Roman C

Vous devez créer votre formulaire OnInit avant de définir sa valeur. Essayez quelque chose comme ça:

settingsForm: FormGroup; 

buildForm(): void {
   settingsForm: FormGroup = this.fb.group({
      //content of settingsForm
   })
}

ngOnInit() {
    this.buildForm();
    this.eventSubscription = this.af.database.object('/events/' + this.eventId)
    //...
    this.settingsForm.setValue({ //you can try .patchValue to set only available value
        //...
    })
}
1
mickdev

Je pense que ce code aidera

 import { FormArray, FormBuilder, FormGroup} from '@angular/forms';

export class SomeComponent implements OnInit {

consutructor(public  fb:FormBuilder) { }

    public buildcollaboratorsGroup(fb:FormBuilder):FormGroup {
        return fb.group({
                            email:'',
                            role:''
                });
    }

ngOnInit() {
    public settingsForm: FormGroup = this.fb.group({
    collaborators:this.fb.array([this.buildcollaboratorsGroup(this.fb)])
    });     

    this.setFormArrayValue();
 }


    // I am trying set only one value if it's multiple use foreach        
    public setFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
        controlArray.controls[0].get('email').setValue('[email protected]');
        controlArray.controls[0].get('role').setValue(2);
    }

    // I am trying remove only one value if it's multiple use foreach        
    public removeFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
           controlArray.removeAt(0);        
    }
}
0
Praveen M P