Pass value from modal form to array in Angular

Question

I'm using a bootstrap modal to get the various input from user and passed it into already existing array of string in Angular. Seems it's not working what to do? Here's code

export class App {

    myform: FormGroup;
    events: any[] = [{
    Name:"Workout",
    Time:"6:00 am",
    Location:"Newton Park",
    Description:"Health is Wealth.",
    Agenda:"300cAl burn."
  },
  {
    Name:"Product review",
    Time:"10:30 am",
    Location:"TCS Sipcot",
    Description:"Reviewing the new version of the existing project.",
    Agenda:"Fulfill client's requirements."
  },
  {
    Name:"Meeting",
    Time:"6:00 pm",
    Location:"Taj Residency",
    Description:"Very useless meeting, Could be emailed as well.",
    Agenda:"Same fking boot licking"
  }];
  
  summary: any = {
  weather: "Cloudy",
  temperature: "30⁰C",
  forecast: "Maximum temperature today near 30 degrees. A partly cloudy and warm day is expected. Lowest relative humidity near 33 percent. Expect 13 hours of sunshine, which is 87 percent of possible sunshine. Average winds will be Northeast at 8 MPH during the morning and Northeast at 9 MPH during the afternoon."
  };
  
  addEvent(data):void {
    this.events.push({
      Name:data.Name, 
      Time:data.Time, 
      Location:data.Location, Description:data.Description, Agenda:data.Agenda});
  }
  heading: string;
 
  constructor(private router: Router) {}
  ngOnInit() {
   this.myform = new FormGroup({
    this.events.Name = new FormControl(),
    this.events.Time = new FormControl(),
    this.events.Location = new FormControl(),
    this.events.Description = new FormControl(),
    this.events.Agenda = new FormControl()
   });
  }

App.html

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Add Event</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form novalidate [formGroup]="myform" (ngSubmit)="addEvent()">
          <div class="form-group">
            <label for="time" class="col-form-label">Time:</label>
            <input type="text" class="form-control" id="time" formControlName="Time">
          </div>
          <div class="form-group">
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="name" formControlName="Name">
          </div>
          <div class="form-group">
            <label for="locate" class="col-form-label">Location:</label>
            <input type="text" class="form-control" id="locate" formControlName="Location">
          </div>
          <div class="form-group">
            <label for="agenda" class="col-form-label">Agenda:</label>
            <input type="text" class="form-control" id="locate" formControlName="Agenda">
          </div>
          <div class="form-group">
            <label for="desc" class="col-form-label">Description:</label>
            <textarea class="form-control" id="desc" formControlName="Description"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" data-dismiss="modal">Add event</button>
      </div>
    </div>
  </div>
</div>

I'm getting issue on line inside ngOnit() so I think there's something wrong in how to access the array property. If there's some other way is there without using formmodule please let me know.

Answer 1

Try this way: In component.ts

    export class App implements OnInit{
    myform: FormGroup;
    events: any[] = [{
    Name: "Workout",
    Time: "6:00 am",
    Location: "Newton Park",
    Description: "Health is Wealth.",
    Agenda: "300cAl burn."
  },
  {
    Name: "Product review",
    Time: "10:30 am",
    Location: "TCS Sipcot",
    Description: "Reviewing the new version of the existing project.",
    Agenda: "Fulfill client's requirements."
  },
  {
    Name: "Meeting",
    Time: "6:00 pm",
    Location: "Taj Residency",
    Description: "Very useless meeting, Could be emailed as well.",
    Agenda: "Same fking boot licking"
  }];

  summary: any = {
    weather: "Cloudy",
    temperature: "30⁰C",
    forecast: "Maximum temperature today near 30 degrees. A partly cloudy and warm day is expected. Lowest relative humidity near 33 percent. Expect 13 hours of sunshine, which is 87 percent of possible sunshine. Average winds will be Northeast at 8 MPH during the morning and Northeast at 9 MPH during the afternoon."
  };

  addEvent(data): void {
    console.log(data);
    
    this.events.push({
      Name: data.Name,
      Time: data.Time,
      Location: data.Location, Description: data.Description, Agenda: data.Agenda
    });
  }
  heading: string;

  constructor(private router: Router) { }
  ngOnInit() {
    this.myform = new FormGroup({
      Name: new FormControl(),
      Time: new FormControl(),
      Location: new FormControl(),
      Description: new FormControl(),
      Agenda: new FormControl()
    });
  }

}

In html:

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Add Event</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form  [formGroup]="myform" (ngSubmit)="addEvent(myform.value)">
          <div class="form-group">
            <label for="time" class="col-form-label">Time:</label>
            <input type="text" class="form-control" id="time" formControlName="Time">
          </div>
          <div class="form-group">
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="name" formControlName="Name">
          </div>
          <div class="form-group">
            <label for="locate" class="col-form-label">Location:</label>
            <input type="text" class="form-control" id="locate" formControlName="Location">
          </div>
          <div class="form-group">
            <label for="agenda" class="col-form-label">Agenda:</label>
            <input type="text" class="form-control" id="locate" formControlName="Agenda">
          </div>
          <div class="form-group">
            <label for="desc" class="col-form-label">Description:</label>
            <textarea class="form-control" id="desc" formControlName="Description"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" data-dismiss="modal">Add event</button>
          </div>
        </form>
      </div>
      
    </div>
  </div>
</div>

Demo: StackBlitz