将值从模态形式传递到 Angular 中的数组

Question

我正在使用 bootstrap 模式从用户那里获取各种输入，并将其传递到 Angular 中已经存在的字符串数组中。好像不行怎么办？这是代码

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>

我在 ngOnit() 中遇到问题，所以我认为访问数组的方式有问题属性。如果还有其他不使用 formmodule 的方法，请告诉我。

Answer 1

试试这个方法： 在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()
    });
  }

}

在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>

演示： StackBlitz

将值从模态形式传递到 Angular 中的数组

Pass value from modal form to array in Angular

html

bootstrap-modal

angular