J'utilise Angular 8 avec "typescript": "~3.5.3". Essayer de faire la collision indéfinie

const { testLocation } = this.ngr.getState();
    this.step2 = testLocation && testLocation.step2 ? testLocation.step2 : {};
    this.$form = this.fb.group({
      // tslint:disable-next-line: max-line-length
      email: [this.step2.email || '', [Validators.required, Validators.email, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
      phone: [this.step2.phone || ''],
      configuration: this.fb.group({
        idTypesAccepted: this.buildIdentityDocumentTypeFormArr(this.identityDocumentType),

        sessionOpenDays: [this.step2.configuration.sessionOpenDays || '', Validators.required],
        sessionOpenHours: [this.step2.configuration.sessionOpenHours || '', Validators.required],
        sessionOpenMinutes: [this.step2.configuration.sessionOpenMinutes || '', Validators.required],

        sessionCloseDays: [this.step2.configuration.sessionCloseDays || '', Validators.required],
      sessionCloseHours: [this.step2.configuration.sessionCloseHours || '', Validators.required],
        sessionCloseMinutes: [this.step2.configuration.sessionCloseMinutes || '', Validators.required],

        applicationExpiryDays: [this.step2.configuration.applicationExpiryDays || '', Validators.required],
        applicationExpiryHours: [this.step2.configuration.applicationExpiryHours || '', Validators.required],
        applicationExpiryMinutes: [this.step2.configuration.applicationExpiryMinutes || '', Validators.required],

        paymentCloseDays: [this.step2.configuration.paymentCloseDays || '', Validators.required],
        paymentCloseHours: [this.step2.configuration.paymentCloseHours || '', Validators.required],
        paymentCloseMinutes: [this.step2.configuration.paymentCloseMinutes || '', Validators.required]
      })
    });

Dans le code ci-dessus this.step2.configuration, la configuration n'est pas définie. Comment puis-je surpasser cela. Je dois remplir une valeur vide ou une valeur à partir de this.step2.configuration

0
San Jaisy 8 oct. 2020 à 10:27

1 réponse

Meilleure réponse

Les trois seules façons que je vois ici sont soit :                                                                                                                                                                              non défini

this.step2 = testLocation && testLocation.step2 ? testLocation.step2 : {};
if(!this.step2.configuration) {
  this.step2.configuration = new Configuration(); // filling the blanks with a dummy data model which has nulled or '' variables;
}

Alternativement dupliquer l'ensemble de la construction de formulaires

if(!this.step2.configuration) {
  this.fb.group({
    sessionOpenDays: ['', Validators.required],
    [...]
  });
  return;
}
this.fb.group({[...]});

Ou vous pouvez passer à Angular 10 (je ne sais pas quelle version de 9 a introduit cela, mais il est certainement disponible sur 10)

this.step2 = testLocation && testLocation.step2 ? testLocation.step2: {};
this.fb.group({
  sessionOpenDays: [this.step2.configuration?.sessionOpenDays || '', Validators.required],
[...]
});

Dans angulaire 10, tout comme il l'a (presque) toujours été dans les modèles html, un point d'interrogation vérifie si la propriété est disponible et sinon, initialise le formControl avec une valeur null. Sachez cependant qu'un appel direct au champ de formulaire produirait également null au lieu de '' alors.

1
scy 8 oct. 2020 à 07:42