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