Eckige 2 - set Kann nicht form-array-Wert

Bekomme ich diesen Fehler:

Gibt es keine Formular-Steuerelemente registriert dieses array noch. Wenn Sie ngModel, möchten Sie vielleicht zu prüfen, nächsten tick (z.B. mit setTimeout).

Wenn mit diesem 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([])
  })
});

Innen 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 || []
      }
    });
  }
);

Wenn collaborators einen Wert enthält, ich.e es ist nicht undefined, null oder leer [] so etwas wie:

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

Dann stürzt die app auf die setValue Zeile in der eventSubscription.

Ich kann nicht herausfinden, warum dies geschieht.

Irgendwelche Ideen?

InformationsquelleAutor Chrillewoodz | 2017-03-14

1

Initialisieren der form array mit der Kontrolle. Das würde das Problem beheben. Sehen Reaktive Formen Anleitung, wenn Sie müssen wissen, wie zu tun. Wenn Sie mit ngModel wäre es wohl Wert, um es zu entfernen.

InformationsquelleAutor Roman C
1

Bauen Sie Ihre form-OnInit, bevor Sie seinen Wert. Probieren Sie etwas wie dieses :
```
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
        //...
    })
}
```
Das ist genau das, was ich Tue sofort. Sie müssen nicht, es zu tun im init-hook.
ok, ich hatte ähnliches Problem und dieses gelöst. Ich dachte, es war das gleiche Problem :(. Haben Sie dieses blog post. Zitat: "die Bereitstellung Ihrer FormControl vorhanden, Angulare Bewegungen auf das Objekt.Schlüssel-Schleife, jedoch wird zuerst überprüfen, dass die Kontrolle fehlt, ist für diesen Wert auch über _throwIfControlMissing:"
Ihr war es ein problem mit fehlenden form-Gruppe, also musste ich eine Schleife über alle Objekte und drücken Sie dann eine neue Gruppe in der form array für jeden. Etwas ärgerlich und seltsame design-Wahl.

InformationsquelleAutor mickdev

Ich denke, dieser code hilft

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

InformationsquelleAutor Praveen M P

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.