Редактирование и сохранение формы ввода в Angular

Question

Как объяснено в заголовке, я попытался создать форму для редактирования существующих имен в массиве, используя ввод формы. У меня проблема в том, что я не могу получить данные выбранного имени динамически, и я не нашел способ сделать это.

Как это должно выглядеть

import {Component, NgModule, OnInit} from "@angular/core";
import * as data from "../assets/heroes.json";

@Component({
  selector: "app-details",
  templateUrl: "./details.component.html",
  styleUrls: ["./details.component.scss"]
})

export class DetailsComponent implements OnInit {

  constructor() { }

  heroName1 = data.heroes[0].name;
  heroName2 = data.heroes[1].name;
  heroName3 = data.heroes[2].name;
  heroName4 = data.heroes[3].name;

  heroID1 = data.heroes[0].id;
  heroID2 = data.heroes[1].id;
  heroID3 = data.heroes[2].id;
  heroID4 = data.heroes[3].id;

  ngOnInit(): void { }
}

{
  "heroes": [

    {
      "id": "01",
      "name": "Mr. Nice"
    },

    {
      "id": "02",
      "name": "Narco"
    },

    {
      "id": "03",
      "name": "Bombasto"
    },

    {
      "id": "04",
      "name": "Celeritas"
    },

    {
      "id": "05",
      "name": "Magneta"
    },

    {
      "id": "06",
      "name": "RubberMan"
    }
  ]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="formBox">
  <h1 class="text-center dash-header">{{ heroName1 }} details!</h1>
  <div style="margin-left: 80px; margin-top: -20px;">
    <div>
      <p class="formP float-left d-md-flex align-items-md-center">id:</p>
      <p class="text-left" style="margin: 0px 90px 40px;font-size: 24px;">{{ heroID1 }}</p>
    </div>
    <div class="form-group">
      <p class="formP float-left d-md-flex align-items-md-center">Name:</p>
      <div>
        <input class="form-control" style="width: 300px; height: 40px; margin: 0px 90px 40px;" type="text" name="heroName" #heroName="ngModel" id="heroName" [(ngModel)]="heroName1">
      </div>
      <div class="alert alert-danger" *ngIf="heroName.touched && !heroName.value">Hero Name is required!</div>
    </div>
    <button class="btn formBtn" type="button" routerLink="/list" routerLinkActive="active">Back</button>
  </div>
</div>

Нажав кнопку «Назад», я хочу сохранить изменения и изменить исходное значение.

Есть ли хороший способ понять это? Заранее спасибо!

Answer 1

FormControl предоставляет Observable valueChanges, на который вы можете подписаться, чтобы реагировать на изменение значения From Control.