J'ai un formulaire réactif qui contient toutes les données nécessaires pour la page/le composant. Cependant, je souhaite également stocker des informations qui ne font pas partie de l'ensemble de données principal mais doivent toujours être stockées dans le cadre du composant. Par exemple, j'ai besoin de savoir si le Widget X est dans l'inventaire. Si c'est le cas, je peux choisir de le prendre dans l'inventaire ou d'en faire un nouveau. J'ai besoin de stocker si elles proviennent de l'inventaire ou non, mais ces informations ne doivent pas être stockées dans le cadre de l'ensemble de données principal.

Je sais que je peux mettre ce que je veux dans le formulaire, puis le supprimer avant de renvoyer les données au serveur. Le problème avec cela est que je veux avoir un bouton Enregistrer qui n'est activé que lorsque le formulaire est sale. Si quelqu'un change de savoir s'il prend le widget de l'inventaire ou non, cela rend le formulaire sale. J'ai donc soit besoin d'un formulaire séparé (mais il doit pouvoir être affiché entrecoupé du formulaire principal), soit d'un moyen de faire en sorte que certains contrôles ne modifient pas la propriété "dirty" du formulaire. L'un ou l'autre est-il possible ?

Espérons que cette question ait un sens. Je ne voulais pas poster tout un tas de code qui n'était pas totalement pertinent. J'utilise Angular 6.

-1
Tim 7 août 2018 à 23:29

1 réponse

Meilleure réponse

Je ne comprenais pas comment plusieurs formulaires pouvaient être affichés sur la même page. En d'autres termes, je pensais que vous deviez faire quelque chose comme où vous étiez limité à une forme :

<form [formGroup]="formOne">
    ...
</form>

Cependant, vous pouvez utiliser autant de formulaires que vous le souhaitez (et même basculer) comme :

<div [formGroup]="formOne">
    ...
</div>
<div [formGroup]="formTwo">
    ...
</div>
<div [formGroup]="formOne">
    ...
</div>

Vous pouvez même le faire pour les contrôles de tableau. (voir cette question pour le boucle)

<div *ngFor="let item of ' '.repeat(partsList.value.length).split(''); let i = index">
    <div [formGroup]="reqSupplemental.at(i)" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
        <button mat-mini-fab disabled style="color: white">{{partsList.value[i].orderNumber}}</button>
        ...
    </div>
</div>

reqSupplemental est un FormArray que j'ai configuré lors de l'initialisation du composant (il contient des données nécessaires au composant mais qui n'ont pas besoin d'être sauvegardées). partsList renvoie un FormGroup qui fait partie des données qui doivent être sauvegardées (mais dans la partie montrée ici, elle est uniquement référencée et ne peut pas être modifiée).

Ainsi, les données du reqSupplemental ne sont pas liées au formulaire de données principal et, par conséquent, les modifications apportées à ses contrôles ne rendent pas le formulaire principal "sale".

0
Tim 9 août 2018 à 00:06