Editar : código de ejemplo alterado para incluir mecanografiado relevante
Tengo un formulario con diferentes botones para que el usuario seleccione. El botón para enviar el formulario está deshabilitado hasta que el usuario selecciona un botón. El truco aquí es que me gustaría que una de las opciones no habilitara el botón de envío, sino que mostrara un cuadro de texto. El botón debe habilitarse si el usuario ingresa algo en el cuadro de texto. Por el momento, mi HTML se parece a esto:
<h1>Do you like sandwiches?</h1> <form id="my-form" action="onSubmit()"> <div> <button *ngFor="let option of myOptions" class="form-button" (click)="selectThisButton(option)">{{ option }}</button> <div id="other-input" *ngIf="showInput"> <label for="text-input">Please elaborate.</label> <input id="text-input" type="text" required> </div> </div> </form> <!--...some other code...--> <button id="submit-button" form="my-form" type="submit" disabled="!my-form.valid">Next</button>La clase mecanografiada también es bastante sencilla:
selectedOption: string showInput = false needsExplanation = false myOptions = ["Yes", "No", "I don't understand", "Other"] selectThisButton(option: string){ this.selectedOption = option this.needsExplanation = (option === "I don't understand") this.showInput = (option === "Other") } onSubmit(){ if(this.selectedOption === "Other"){ this.selectedOption = (document.getElementById("text-input") as HTMLInputElement).value } continueAndDoOtherStuff() } Todo esto funciona excepto el último paso, es decir, ingresar algo en el cuadro de texto no habilita el botón "siguiente" cuando debería. También intenté no usar un formulario y simplemente poner un EventListener en el cuadro de texto después de ngIf se haya procesado para escuchar un evento de keyup, pero eso tampoco funcionó.
Se agradecería cualquier ayuda, especialmente las sugerencias que no dependan de jQuery.
un poco corto de tiempo, por lo que trabajaré esta respuesta más adelante si desea que lo haga.
¿Por qué no agrega un evento (keyup.enter) en el cuadro de entrada, por ejemplo ( Angular 6 agrega entrada en la tecla Intro )?
El método que vincula a este evento en la plantilla html, utilícelo en la plantilla mecanografiada para cambiar un booleano verdadero/falso y vincular ese booleano al botón de envío que desea habilitar/deshabilitar. (Como ya lo estás haciendo).
Hágame saber: (i) si desea que se resuelva esta respuesta (ii) si no lo ayudó (y qué sucedió).
Tenga cuidado y buena suerte.
(Perdón por la respuesta limitada).
¿Hay alguna motivación para usar botones simples en lugar de botones de opción?
Entonces, ¿por qué no usas las API que te da Angular?
En primer lugar, podría usar [(ngModel)] en lugar de la función selectThisButton :
<form id="my-form" #form="ngForm"> <div> <input type="radio" class="form-button" [(ngModel)]="selectedValue" value="yes" id="yes" name="selection" /> <label for="yes">Yes</label> <input type="radio" class="form-button" [(ngModel)]="selectedValue" value="no" id="no" name="selection" /> <label for="no">No</label> <input type="radio" class="form-button" [(ngModel)]="selectedValue" value="dont-understand" id="dont-understand" name="selection" /> <label for="dont-understand">I don't understand the question</label> <input type="radio" class="form-button" [(ngModel)]="selectedValue" value="other" id="other" name="selection" /> <label for="other">Other</label> <div id="other-input" *ngIf="selectedValue === 'other'"> <label for="text-input">Please elaborate.</label> <input id="text-input" type="text" required> </div> </div> </form> <!--...some other code...--> <button id="submit-button" form="my-form" type="submit" [disabled]="!form.valid">Next</button> Lo único que necesita en su archivo component.ts es el campo selectedValue :
@Component({ selector: ..., templateUrl: './....component.html', }) export class YourComponent { selectedValue: string = undefined; }Y su entrada de texto debe mostrarse solo cuando se selecciona el otro botón