Two way binding variable in Modal - Angular

Question

I have a Bootstrap Modal that I initialize using jQuery as follows:

$('#saleModal').modal('show'); // I know I should use the angular way in initializing the modal but...

In the Modal I have an input that I need to bind to a variable as follows:

<input type="text" [(ngModel)]="toBeBoundVariable">

But the binding does not work. How can I tell Angular to check for bindings in that Modal.

My best guess for the reason why it's not binding is because the Modal was initialized using jQuery. But, is there a way to tell Angular, "Hey, there is a Bootstrap Modal initialized, there are some bindings you need to be aware of".

Here is the code:

<!--Modal start-->
 <div class="modal" id="saleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel_4"
 aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel_4">New/Edit Sale</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="ion-ios-close-empty"></i></span>
        </button>
      </div>
  <form>

    <div class="modal-body">

      <label class="col-sm-4 form-control-label">Name</label>
      <div class="col-sm-8 mg-t-10 mg-sm-t-0">
        <input type="text" class="form-control" [(ngModel)]="firstname">
      </div>
      Bound firstname: {{firstname}}
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary"
      >
        <i></i>Save
      </button>
    </div>
  </form>
</div>

.ts file

import {Component, OnInit} from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-purchase',
  templateUrl: './purchase.component.html',
  styleUrls: ['./purchase.component.css']
})
export class PurchaseComponent implements OnInit {

  firstname: string;

  constructor() {


  }

  ngOnInit() {

  }


  showModal() {
   $('#saleModal').modal('show');
  }


}

can you share some code you tried, like, the modal component you have created? — Roy
– Roy, Commented Nov 12, 2019 at 14:13
Just don't do it. Either use angular-material/cdk or ng-bootstrap. — s.alem
– s.alem, Commented Nov 12, 2019 at 15:54

Nithya Rajan · Accepted Answer · 2019-11-13 06:14:57Z

1

I think you have missed to add name attribute in your input field.

  <input type="text" class="form-control" [(ngModel)]="firstname" name="firstName">

Hope, it solves your problem. Make sure you have imported the FormsModule in your module.

answered Nov 13, 2019 at 6:14

Nithya Rajan

4,93422 silver badges34 bronze badges

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

1 Comment

Kihats Over a year ago

It worked! I can't believe missing the name attribute would cause that issue. Thanks

Collectives™ on Stack Overflow

Two way binding variable in Modal - Angular

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