I've been working in a project in ionic that requires the user to choose from multiple options to fill out inputs about that options, so I'm working with reactive form, form builder, with the method setValidators() to require the inputs that they choose, the issue is that the submit button doesn't enable until all the information is filled (even the ones that the user didn't choose)
This is my form so far:
valoracionForm = this.formBuilder.group({
input_peso: ['', Validators.required],
input_talla: ['', Validators.required],
tallaEstimada: this.formBuilder.group({
input_metodoTallaEstimada: [''],
rodillaTalon: this.formBuilder.group({
input_alturaRodilla: ['', Validators.required]
}),
rodillaMaleolo: this.formBuilder.group({
input_longitudRodilla: ['', Validators.required]
})
})
This is the html:
<ion-list formGroupName="tallaEstimada">
<ion-item-divider>
Talla Estimada
</ion-item-divider>
<ion-item>
<ion-label>Método</ion-label>
<ion-select interface="popover" formControlName="input_metodoTallaEstimada"
(ionChange)="definirEntradaMetodoTallaEstimada()">
<ion-select-option value="Rodilla-Talon">Rodilla-Talón</ion-select-option>
<ion-select-option value="Rodilla-Maleolo">Rodilla-Maléolo</ion-select-option>
</ion-select>
</ion-item>
<div *ngFor="let error of errorMessages.metodoTallaEstimada">
<ng-container
*ngIf="getMetodoTallaEstimada().hasError(error.type) && (getMetodoTallaEstimada().dirty || getMetodoTallaEstimada().touched)">
<small class="error-message">{{error.message}}</small>
</ng-container>
</div>
<ion-list *ngIf="flagRodillaTalon" formGroupName="rodillaTalon">
<ion-item>
<ion-label position="floating">Altura Rodilla:</ion-label>
<ion-input type="number" class="ion-text-right" formControlName="input_alturaRodilla"></ion-input>
</ion-item>
<div *ngFor="let error of errorMessages.alturaRodilla">
<ng-container
*ngIf="getAlturaRodilla().hasError(error.type) && (getAlturaRodilla().dirty || getAlturaRodilla().touched)">
<small class="error-message">{{error.message}}</small>
</ng-container>
</div>
</ion-list>
<ion-list *ngIf="flagRodillaMaleolo" formGroupName="rodillaMaleolo">
<ion-item>
<ion-label position="floating">Longitud rodilla:</ion-label>
<ion-input type="number" class="ion-text-right" formControlName="input_longitudRodilla"></ion-input>
</ion-item>
<div *ngFor="let error of errorMessages.longitudRodilla">
<ng-container
*ngIf="getLongitudRodilla().hasError(error.type) && (getLongitudRodilla().dirty || getLongitudRodilla().touched)">
<small class="error-message">{{error.message}}</small>
</ng-container>
</div>
</ion-list>
</ion-list>
and this is the method that the selector is calling to load the corresponding inputs:
definirEntradaMetodoTallaEstimada() {
if (this.valoracionForm.get("tallaEstimada.input_metodoTallaEstimada").value == "Rodilla-Talon") {
this.flagRodillaMaleolo = false;
this.flagRodillaTalon = true;
this.valoracionForm.get("tallaEstimada.rodillaTalon.input_alturaRodilla").setValidators([Validators.required]);
this.valoracionForm.get("tallaEstimada.rodillaTalon.input_alturaRodilla").updateValueAndValidity;
this.valoracionForm.get("tallaEstimada.rodillaMaleolo.input_longitudRodilla").setValidators([]);
this.valoracionForm.get("tallaEstimada.rodillaMaleolo.input_longitudRodilla").updateValueAndValidity;
} else if (this.valoracionForm.get("tallaEstimada.input_metodoTallaEstimada").value == "Rodilla-Maleolo") {
this.flagRodillaTalon = false;
this.flagRodillaMaleolo = true;
this.valoracionForm.get("tallaEstimada.rodillaMaleolo.input_longitudRodilla").setValidators([Validators.required]);
this.valoracionForm.get("tallaEstimada.rodillaMaleolo.input_longitudRodilla").updateValueAndValidity;
this.valoracionForm.get("tallaEstimada.rodillaTalon.input_alturaRodilla").setValidators([]);
this.valoracionForm.get("tallaEstimada.rodillaTalon.input_alturaRodilla").updateValueAndValidity;
}
}
PD: i've followed this post Angular - Dynamically add/remove validators but the method controls["path"] doesn't work, doesn't recognize the path so maybe if i use this method will work correctly but i don't know how to get the path right, i've tried "tallaEstimada.rodillaTalon.input_alturaRodilla"
and "input_alturaRodilla"
and in both is undefined