locked
Angular Binding not working on form RRS feed

  • Question

  • User956626884 posted

    Hi,

    I had to remove a popup modal and convert it a new HTML page. When I first  select a row in grid/table, I set the binding variables. When the popup shows up, I see the two datepickers showing the selected as well as the dropdown list value. I copied the code and created a new component. In the constructor, I set the value which I stored in a  service. When the page appears the datepickers are blank and no dropdown value is selected. I am stuck on how it works in the popup but the binding is not working on the new html and ts code. Any help is appreciated. Thanks.

    html.component

    <div class="container">
      <hr>
    <div class="row">
    <div class="col-sm-6">
    </div>
    </div>
    <div class="row">
    <div class="col-sm-4 col-sm-offset-3">
      <div class="panel panel-primary" style="width:100%" >
          <div class="panel-heading text-center"><h3>{{meetingRequest.Title}}</h3></div> 
          <br/> 
          <div style="padding-top:10px;padding-left:25px;padding-right:10px;;">
            <div *ngIf="errorMessage" class="alert alert-danger">{{ errorMessage }} </div>
    
            <form >
              <div class="form-group">
                <label for="meetingDate">Meeting Date:</label>
                <div class="input-group">
                    <input id="meetingDate" class="form-control" placeholder="mm-dd-yyyy" name="dp1" #c2="ngModel" [(ngModel)]="MeetingDt" ngbDatepicker #d1="ngbDatepicker">
                    <div class="input-group-addon" (click)="d1.toggle()" >  
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 
                    </div> 
                </div>
                <br/>
                <label>Meeting Type:</label>
        
                <div ngbDropdown class="d-inline-block">
                  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>{{displayMessage}}</button>
                  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                      <div *ngFor="let option of types">
                          <button class="dropdown-item" id="option" on-click="changeMessage(option)">{{option}}</button>
                      </div>
                  </div>
                </div>
      
                <br/>
                <label for="PublicDate">Date Final Staff Reports Available to the Public:</label>
                <div class="input-group">
                    <input type="date" id="PublicDate"  class="form-control" placeholder="yyyy-mm-dd" name="dp2"  #c2="ngModel" [(ngModel)]="PublicDate" name="PublicDate"  #publishDate="ngModel"   ngbDatepicker #d2="ngbDatepicker" required>
                    <div class="input-group-addon" (click)="d2.toggle()" >
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                    </div>
                </div>
    
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Cancel</button>
                    <input type="submit" value="Submit" class="btn btn-primary" (click) ="submit()" >
                  </div>
              </div>
            </form>
    
          </div>
    </div> 
    </div> 
    </div>
    <hr>
    </div>

    TS

    import { Component, OnInit } from '@angular/core';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';
    import { Router } from '@angular/router';
    import { MeetingDateService } from '../../services/meetingdateservice.service';
    import { TransferServiceService } from '../../services/transfer-service.service';
    
    @Component({
      selector: 'app-manage-meeting-dates',
      templateUrl: './manage-meeting-date.component.html',
      styleUrls: ['./manage-meeting-date.component.scss']
    })
    export class ManageMeetingDateComponent implements OnInit {
      MeetingDt:Date;
      PublicDate:Date;
      MeetingId : Number;
      MeetingType: "";
      UserName: ""; 
      public errorMessage = "";
      public Title : string ="Edit Meeting Date";
      displayMessage = 'Select Meeting Types';
      types = ['Option 1', 'Option 2', 'Option 3']
      public meetingRequest = {
        "MeetingId" : Number,
        "MeetingDt":  "",
        "PublicDate": "",
        "MeetingType": "",
        "UserName": "",
        "Title":""
      };
    
      constructor(private meetingDateService: MeetingDateService, private router : Router,private transferService:TransferServiceService) { 
        this.meetingRequest = this.transferService.getData();
        this.MeetingDt = new Date(this.meetingRequest.MeetingDt);
        
        this.displayMessage = this.meetingRequest.MeetingType;
        this.meetingRequest.UserName = sessionStorage.getItem('userName');
        
        
      }
    
      ngOnInit() {
    
      }
    
      
      changeMessage(selectedType: string) {
        this.meetingRequest.MeetingType = selectedType
        this.displayMessage = selectedType;
      }
     
    }
    

    Wednesday, November 21, 2018 11:00 PM

Answers

  • User-271186128 posted

    Hi comicrage

    When the page appears the datepickers are blank

    Since you are using ng-bootstrap datepicker components, the Datepicker uses NgbDateStruct interface as a model and not the native Date object. It's a simple data structure with 3 fields, like this:

    const date: NgbDateStruct = { year: 1789, month: 7, day: 14 }; // July, 14 1789
    const date: NgbDate = new NgbDate(1789, 7, 14);                // July, 14 1789

    So, please check your date, and make sure it using this format.

    no dropdown value is selected

    Do you mean you can't get the selected dropdown menu value?

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 23, 2018 8:56 AM

All replies

  • User-271186128 posted

    Hi comicrage

    When the page appears the datepickers are blank

    Since you are using ng-bootstrap datepicker components, the Datepicker uses NgbDateStruct interface as a model and not the native Date object. It's a simple data structure with 3 fields, like this:

    const date: NgbDateStruct = { year: 1789, month: 7, day: 14 }; // July, 14 1789
    const date: NgbDate = new NgbDate(1789, 7, 14);                // July, 14 1789

    So, please check your date, and make sure it using this format.

    no dropdown value is selected

    Do you mean you can't get the selected dropdown menu value?

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 23, 2018 8:56 AM
  • User956626884 posted

    Thanks for your help.

    Friday, November 23, 2018 12:26 PM