web-dev-qa-db-fra.com

Fixer la validité d'un Angular 2 contrôle depuis un composant personnalisé

J'ai un composant personnalisé Ng2 et j'utilise l'approche basée sur le modèle.

<form [ngFormModel]="myForm" class="layout vertical relative">
    <my-custom-comp ngControl="currentValue"></my-custom-comp>
</form>

Donc, à l'intérieur de mon composant personnalisé, j'ai toute la logique dont j'ai besoin, mais je ne trouve pas le moyen d'obtenir une référence à ngControl pour le définir comme valide ou non valide à l'intérieur de mon composant personnalisé.

formsangular
8
Brett

Vous pouvez consulter ce lien pour un exemple de travail: https://github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore

Quelques aspects clés:
Vous devez implémenter ControValueAccessor.

export class Datepicker implements ControlValueAccessor {

Injectez dans votre composant le ngControl et enregistrez-le:

constructor(private ngControl:NgControl)
ngControl.valueAccessor = this;

Dans votre composant, vous devriez avoir un formulaire qui valide le champ afin que vous puissiez vous abonner pour émettre la valeur correcte ou définir l'erreur du formulaire ngControl parent.

 this.dateForm = builder.group({
          dateControl: ['', Validators.compose([Validators.required, CustomValidators.frenchDate])],
        });

    this.dateForm.valueChanges
      .subscribe((val) => {
        if (this.dateForm.valid) {
          this.onChange.emit(this.dateToTimestamp(val.dateControl));
        } else {
          this.ngControl.control.setErrors({ "wrongDate": true });
        }
      });
7
Brett

Comment définirVALIDEouINVALIDEsur n'importe quel groupe de formulaires

// Where this.form === FormGroup;
// FormGroup can be deeply nested, just call at the level you want to update.
// That level should have direct access to base FormControls

// Can be done in a validator function;
this.form.get('name').setErrors({required: true});
// => this.form.get('name').invalid === true;

// Perhaps on Submit, click, event NOT in validator function
Object.entries(this.form.controls).forEach(([key, ctrl]) => {
  ctrl.updateValueAndValidity();
});
// => this.form.get('name').invalid === false;
// => this.form.get('name').valid === true;
// => this.form.get('name').errors === null;
0
SoEzPz
this.myForm.controls['currentValue']....

mais il n’existe actuellement aucun moyen de le définir explicitement sur valid ou invalid.

Vous pouvez définir un validateur et modifier les critères afin que le contrôle soit invalide. 

Voir par exemple https://github.com/angular/angular/issues/4933

0
Günter Zöchbauer