Angular2 Composant Personnalisé marque de vierge et intacte

J'ai un modèle de moteur, de forme Angulaire 2.1 contenant de nombreux contrôles standard (<input>, <select> etc) et un contrôle personnalisé qui lui-même contient plusieurs éléments d'entrée.

J'ai mis en place ControlValueAccessor sur le contrôle personnalisé et c'est la propagation, il est modifié/touché/valeurs valides correctement le formulaire parent.

Cependant .. sur le formulaire parent j'ai un bouton "Enregistrer", sur lequel après l'enregistrement, je veux effacer la sale/touché de l'état (ce qui affecte la css appliquée) comme ceci:

save(myForm: NgForm) {

    myForm.form.markAsPristine();
    myForm.form.markAsUntouched();

}

Ce travail est ok pour tous les éléments dans le haut niveau du formulaire parent et le contrôle personnalisé lui-même mais la <input> champs dans le contrôle personnalisé sont toujours marqués comme touché/sale (et ce, à la réception de la pré-enregistrées style).

Est-il possible que le contrôle personnalisé peut être notifié quand il est sale/touché de l'état est modifié de sorte qu'il peut alors clair c'est l'enfant <input> éléments de match? Il semble que si la <input> éléments sont à l'intérieur d'un contrôle personnalisé à ne pas obtenir de mises à jour par des appels à markAsPristine/Intact sur le Formulaire parent.

Merci!

OriginalL'auteur Garth Mason | 2016-12-22

  1. 8

    Essayez d'ajouter controls['nameOfControl'] comme ce

     myForm.form.controls['nameOfControl'].markAsPristine();

    Le code ci-dessus ne fonctionne que pour les contrôles de formulaire.

    La suite semble être un bon travail autour de:

      active = true;
  newModel() {
    this.model = new yourModel(2, '',true, '');
    this.active = false;
    setTimeout(() => this.active = true, 0);
  }

    Réinitialiser le formulaire avec un nouveau Modèle ET de restauration de la "vierge" état de classe.
    par le basculement de la "actif" drapeau sera la cause de la forme à l'être supprimé/ajouté dans un tique par NgIf. Oui c'est un petit travail autour jusqu'à ce qu'ils peuvent corriger 🙂

    espère que ça aide

    merci mais cela ne fonctionne pas .. qui marque uniquement le composant personnalisé avec 'nameOfContrlol' immaculées .. ne pas en être un des éléments au sein de ce contrôle
    Yep, j'avais vu que la solution de contournement décrite dans la version précédente de la doco (et sur) pour réinitialiser le formulaire de valeurs ... était dans l'espoir d'éviter que le simple crochet sale/touché propriétés .. mais peut donner un coup de feu
    FormBuilders, FormControls, et FormGroups offrent offrent ces caractéristiques de la boîte si vous vous retrouvez dans un hacky impasse.
    si vous avez une telle grande forme, vous pouvez faire comme ceci.forme.reset ().forme.markAsPristine()

    OriginalL'auteur bendyourtaxes

  2. 10

    La solution de contournement avec l'indicateur active fait le travail, mais j'ai aussi trouvé un autre moyen.

    Sur le formulaire parent, je peux accéder à mon enfant personnalisé composant comme ViewChild.

    je.e dans le formulaire parent:

    @ViewChild(CustomChildComponent) child1: CustomChildComponent;

    Puis quand je l'ai enregistrer dans le formulaire parent, appel direct de l'enfant.

    enregistrer(myForm: NgForm) {

    //clear anything at the parent form level
myForm.form.markAsPristine();
myForm.form.markAsUntouched();

//tell the custom component to do the same
this.child1.markAsPristineAndUntouched();

    }

    Où dans CustomChildComponent j'ai défini
    ..

    //get the input controls in the the child that we want to clear 
@ViewChild('surname') surnameField: NgModel;

markAsPristineAndUntouched() { 

   this.surnameField.control.markAsPristine();
   this.surnameField.control.markAsUntouched();
   //.. clear other controls .. 
}
    Merci, perdu beaucoup de temps sur ce sujet et était si simple à la fin!

    OriginalL'auteur Garth Mason