Angular: Template driven form field validation in ngBootstrap modal dialog

Question

I have template driven form validation inside of an ngBootstrap dialog like this:

<ng-template #content let-modal>
  <div class="modal-header">
     ...
  </div>
  <div class="modal-body">
    <form>
      <label for="newplaylistname">Name:</label>
      <input #validate="ngModel" name="newplaylistname" id="newplaylistname" pattern="^[A-Za-z0-9\s-_]+$" ngbAutofocus (keydown.enter)="$event.preventDefault();modal.close();" type="text" [(ngModel)]="newplaylistname"/><br/>
        <!-- Validator Message -->
        <div *ngIf="validate.invalid && (validate.dirty || validate.touched)"
            class="alert alert-danger">

          <div *ngIf="validate.errors.pattern">
            Der Name darf nur Buchstaben, Ziffern und Leerzeichen sowie _ und - enthalten.
          </div>

        </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="modal.dismiss()">Abbrechen</button>
    <button type="button" class="btn btn-primary" (click)="modal.close()" [disabled]="validate.invalid">Anlegen</button>
  </div>
</ng-template>

It works (almost) perfectly. BUT, as you can see, I use (keydown.enter) event handler on the input element. And it will still trigger the close method of the modal dialog, even though the textbox content might be invalid.

I tried the following without success:

(keydown.enter)="if(!validate.invalid) modal.close();". It gives an error "Invalid token if". Obviously you cannot use if conditions in those event handler strings
In the code that is being called upon modal dialog close, I tried to use ViewChild/ElementRef to get a hold on the element and check its validation state:

.

 @ViewChild("validate") validateRef: ElementRef;
 ...
 if(!this.validateRef.nativeElement.invalid)
 // or if(!this.validateRef.invalid)
 // both give undefined already for this.validateRef

What can I do to prevent either keydown.enter from firing OR check the validation state of the field inside of my code?

Chronus · Accepted Answer · 2018-12-06 09:22:12Z

1

Have you tried a ternary operator?

(keydown.enter)="!validate.invalid ? modal.close() : whatever you want in case of false condition"

answered Dec 6, 2018 at 9:22

Chronus

3013 silver badges17 bronze badges

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

1 Comment

devnull69 Over a year ago

Thank you. It works, but because I don't need the "else" part, I used this !validate.invalid && modal.close($event). Then I do the $event.preventDefault() part inside of the modal.close code

Collectives™ on Stack Overflow

Angular: Template driven form field validation in ngBootstrap modal dialog

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related