Angular Required Form Input with ngIf

Question

Edit: altered example code to include relevant typescript

I have a form with different buttons for the user to select. The button to submit the form is disabled until the user selects a button. The trick here is that I would like one of the options to not enable the submission button, but to instead show a textbox. The button should then be enabled if the user enters something into the textbox. At the moment, my HTML looks a little something like this:

<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>

The typescript class is fairly straightforward as well:

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()
}

All of this works except for the last step, i.e. entering something into the textbox doesn't enable the "next" button when it should. I've also tried not using a form and just putting an EventListener on the textbox after the ngIf has rendered to listen for a keyup event, but that didn't work either.

Any help would be appreciated, especially suggestions that don't rely on jQuery.

Can you share your relevant ts code?

Misha Mashina
– Misha Mashina

2022-03-02 20:50:02 +00:00
Commented Mar 2, 2022 at 20:50 — Misha Mashina
– Misha Mashina, Commented Mar 2, 2022 at 20:50

qqtf · Accepted Answer · 2022-03-03 23:19:49Z

1

a little bit short on time, so I'll work this answer further out later if you would like me to do so.

Why don't you add a (keyup.enter)-event in the input-box, e.g. (Angular 6 add input on enter key)?

The method you link to this event in the html-template, use it in the typescript template to switch a boolean true/false and link that boolean to the submit-button you want to enable/disable. (Like you're already doing.)

Please let me know: (i) if you want this answer to be worked out (ii) if it didn't help you (and what happened).

Take care and good luck.

(Sorry for the limited answer.)

answered Mar 3, 2022 at 23:19

qqtf

7216 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michele Da Rin · Accepted Answer · 2022-03-02 21:01:52Z

Is there a motivation for using plain buttons instead of radio buttons?

Then, why don't you use the the APIs that Angular gives you?

First of all you could use [(ngModel)] instead of the selectThisButton function:

<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>

The only thing you need on your component.ts file is the selectedValue field:

@Component({
  selector: ...,
  templateUrl: './....component.html',
})
export class YourComponent {
  selectedValue: string = undefined;
}

And your text input should be shown only when the other button is selected

Collectives™ on Stack Overflow

Angular Required Form Input with ngIf

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related