Как связать значения формы редактирования с массивом объектов в угловых 5? - PullRequest
Новая
       30

Как связать значения формы редактирования с массивом объектов в угловых 5?

0 голосов
/ 01 ноября 2019

У меня есть массив Student объектов. Интерфейс выглядит примерно так: 

interface Student {
  title: string;
  firstName: string;
  lastName: string;
  dob: string;
  age: number;
}

Я хочу редактировать title, firstName & lastName.

Форма будет содержать массив объектов ученика. Уже есть некоторые данные в объектах, извлеченных из базы данных. title - это раскрывающийся список, firstName и lastName - это текстовые поля.

Там будет кнопка сохранения, при нажатии которой значения формы должны быть связаны и отправлены через Student[] в машинописный текст.

Как мне этого добиться?

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Вы можете использовать свойство *ngFor для таких элементов, как <li>, <div> или <ng-container>, чтобы отображать каждого учащегося следующим образом: 

<ul>
  <li *ngFor="let student of students">
    {{ student.firstName }}
  </li>
</ul>

Из-за двусторонней привязки Angular вы можетепоместите html из ввода, привязанного к свойствам студента.

Источники:

https://angular.io/guide/displaying-data

https://angular.io/api/core/Input

https://docs.angularjs.org/api/ng/directive/select

0 голосов
/ 01 ноября 2019

Вы можете использовать для этого реактивную форму.

Сначала получите ваши данные и сгенерируйте FormGroup соответственно. Я делаю это, используя FormBuilder в методе ngOnInit.

Все, что вы получаете от API, может быть отображено как FormArray из FormGroup (s).

Теперь в шаблоне вам нужно будет просто использовать директиву formControlName в списке выбора, чтобы автоматически заполнить его данными API для свойства title.

Попробуйте это сделать: 

import { Component } from "@angular/core";
import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";
import { HttpClient } from "@angular/common/http";

interface Student {
  title: string;
  firstName: string;
  lastName: string;
  dob: string;
  age: number;
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  form: FormGroup;
  constructor(private http: HttpClient, private fb: FormBuilder) {}

  ngOnInit() {
    this.http.get("/assets/data.json").subscribe((students: Array<Student>) => {
      this.form = this.fb.group({
        students: this.fb.array(
          students.map(student =>
            this.fb.group({
              title: [student.title],
              firstName: [student.firstName],
              lastName: [student.lastName],
              dob: [student.dob],
              age: [student.age]
            })
          )
        )
      });
    });
  }

  onSubmit() {
    console.log("Form Value: ", this.form.value);
  }
}

И в шаблоне: 

<form 
  *ngIf="form" 
  [formGroup]="form" 
  (submit)="onSubmit()">
  <div 
    formArrayName="students" 
    *ngFor="let studentFormGroup of form.controls['students'].controls; let i = index;">
    <div [formGroupName]="i">
      <label for="title">Title</label>
      <select name="title" id="title" formControlName="title">
        <option value="" disabled>Select</option>
        <option value="Mr.">Mr.</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Ms.">Ms.</option>
      </select>
      <br>
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" formControlName="firstName">
      <br>
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" formControlName="lastName">
      <br>
      <label for="dob">DOB</label>
      <input type="text" id="dob" formControlName="dob">
      <br>
      <label for="age">Age</label>
      <input type="text" id="age" formControlName="age">
      <br>
      <hr>
      <br>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

Вот Пример рабочего кода для вашей ссылки.

...