lundi 22 août 2022

Better way to add a free text field option to a mat-select-list in Angular

I have several lists of mat-select-list check boxes in a form on one of my apps that are all structured like this:

    <div class="question">
      <div class="row">
        <h5>13. Alliance/Decision Support</h5>
      </div>
      <mat-selection-list #allianceDecisionSupport (selectionChange)="onApplicationSelection(1, $event.options)">
        <mat-list-option  class="col-md-3" checkboxPosition="before" value="Crystal Reports Access">Crystal Reports Access</mat-list-option>
        <mat-list-option  class="col-md-3" checkboxPosition="before" value="ADS Database Access">ADS Database Access</mat-list-option>
        <mat-list-option  class="col-md-3" checkboxPosition="before" [value]="other13.value">Other <input #other13 type="text" class="form-control other" id="other13" name="other13" placeholder="Enter data as required..."/></mat-list-option>
      </mat-selection-list>
    </div>

The only problem I have is that when the user clicks on the text field to type it checks the box beside it and my client doesn't like that. They want the user to have to check the check box and then type or vise versa. Either way, I just need the box to not be checked just by typing; the user should have to click checkbox itself. If it isn't clear, the free text field is the value of the the last checkbox option. Everything else works correctly, the client just doesn't like that the check appears when the user clicks to type.

Maybe what I have done is not the best way to do this and maybe there's a completely better method. I'm open to pretty much any option here.

If you need any additional information please let me know.




Aucun commentaire:

Enregistrer un commentaire