如何获取要插入表单以进行编辑以更新记录的值？

Question

首先我有一个表格来显示所有书籍记录，我有一个按钮用于编辑记录，我想在editbook.html上进行编辑，当我点击提交时，记录将被更新。我可以知道如何实现吗？

<tbody>
    <tr *ngFor="let book of books">
      <td class="td-title">{{book.title}}</td>
      <td>{{book.author}}</td>
      <td>{{book.price}}</td>
      <td>{{book.isbn}}</td>
      <td>{{book.details.pages}}</td>
      <td>{{book.details.language}}</td>
      <td class="td-desc">{{book.description}}</td>
      <td><button type="button"><a [routerLink]="['/editbook/', book.isbn]">Edit</a></button></td>
      <td><button type="button">Delete</button></td>
    </tr>
  </tbody>

现在我要在单击编辑按钮时编辑记录。 和我的编辑表单 html

editbook.html

<div *ngIf="book" class="bookdetail-block">
  <div *ngFor="let bookdetail of book" class="bookdetail">
<h1>Edit Book</h1>
<form [formGroup]="editbookForm" (ngSubmit)="onSubmit()">
    <label>Title: <input type="text" formControlName="title">
        <div *ngIf="submitted && editbookForm.controls.title.errors" class="error">
            <div *ngIf="editbookForm.controls.title.errors.required">Required</div>
        </div>
    </label>

    <label>Author: <input type="text" formControlName="author">
        <div *ngIf="submitted && editbookForm.controls.author.errors" class="error">
            <div *ngIf="editbookForm.controls.author.errors.required">Required</div>
        </div>
    </label>

    <label>Description: <textarea type="text" formControlName="description"></textarea>
        <div *ngIf="submitted && editbookForm.controls.description.errors" class="error">
            <div *ngIf="editbookForm.controls.description.errors.required">Required</div>
        </div>
    </label>

    <label>Page: <input type="number" min="1" max="10000" formControlName="page">
        <div *ngIf="submitted && editbookForm.controls.page.errors" class="error">
            <div *ngIf="editbookForm.controls.page.errors.required">Required</div>
        </div>
    </label>

    <label>language:
        <select formControlName="language">
                    <option value="English">English</option>
                    <option value="Traditional Chinese">Traditional Chinese</option>
                    <option value="Simpify Chinese">Simpify Chinese</option>
        </select>
        <div *ngIf="submitted && editbookForm.controls.page.errors" class="error">
                <div *ngIf="editbookForm.controls.page.errors.required">Please select one option</div>
        </div>
    </label>
    <br />

    <label>Price: <input type="number" formControlName="price">
        <div *ngIf="submitted && editbookForm.controls.price.errors" class="error">
            <div *ngIf="editbookForm.controls.price.errors.required">Required</div>
        </div>
    </label>

    <label>ISBN: <input type="text" formControlName="isbn">
        <div *ngIf="submitted && editbookForm.controls.isbn.errors" class="error">
            <div *ngIf="editbookForm.controls.isbn.errors.required">Your name is required</div>
        </div>
    </label>

    <label>Image: <input (change)="onFileSelect($event)" type="file">
        <div *ngIf="imageData" class="error">
            <img [src]="imageData" [alt]="editbookForm.value.name">
        </div>
    </label>

    <label style="display:none">ImageData:
        <!-- <div *ngIf="submitted && editbookForm.controls.image.errors" class="error"> -->
            <input type="hidden" id="uploadImage">
        <!-- </div> -->
    </label>

    <input type="submit" value="Update Book" class="cta">

</form>
<div *ngIf="success" class="results">
        <p>The Book is updated into the record.</p>
</div>
</div>
</div>

还有editbook.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { DataService } from '../data.service';
import { ActivatedRoute, Router } from "@angular/router";

interface HTMLInputEvent extends Event {
  target: HTMLInputElement & EventTarget;
}
@Component({
  selector: 'app-editbook',
  templateUrl: './editbook.component.html',
  styleUrls: ['./editbook.component.scss']
})
export class EditbookComponent implements OnInit {
  isbn: any;
  book: any;
  editbookForm: FormGroup;
  submitted = false;
  success = false;
  imageData : String;
  constructor(private formBuilder: FormBuilder, private data: DataService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {

    this.isbn = this.route.snapshot.paramMap.get("isbn");
    this.data.getOneBook(this.isbn).subscribe(data =>{
      console.log({ data });  //show data
      this.book = data
      //console.log(this.books);
    })
  }

  onFileSelect(event?: HTMLInputEvent){
    console.log("selected file")
    console.log(event)
    let files: any = event.target.files[0];
    console.log(files);

    const reader = new FileReader();
    reader.onloadend = () => {
      var b64 = reader.result.toString();
      let el :any = document.querySelector('#uploadImage');
      el.value = b64;
    }
    reader.readAsDataURL(event.target.files[0]);
  }


  onSubmit() {
    /*
    // upload image
    this.bookForm.reset();
    this.imageData = null;
    */

    this.submitted = true;
    if(this.editbookForm.invalid) {
      return;
    }

    this.data.insertBook(this.editbookForm.controls);
    this.success = true;
  }
}

如何将值插入到 html 输入中？

Answer 1

假设您目前有两个字段（title 和 author），在确定一切正常之后再填写其他字段。

从简单示例开始（暂时从 HTML 中删除验证）。

所以，最初，您的 HTML 应该是这样的：

<form [formGroup]="editbookForm" (ngSubmit)="onSubmit()">
    <label>Title: 
        <input type="text" formControlName="title">
    </label>

    <label>Author: 
        <input type="text" formControlName="author">
    </label>

    <input type="submit" value="Update Book" class="cta">
</form>

那么你的OnInit 应该是这样的：

ngOnInit() {
    this.isbn = this.route.snapshot.paramMap.get("isbn");
    if (this.isbn) {
      //Cleaning the form from the previous data
      if (this.editbookForm) this.editbookForm.reset();

      this.data.getOneBook(this.isbn)
        .pipe(take(1))  //To ensure that it will unsubscribe later
        .subscribe((data) => {
          this.book  = data;

          //Filling the form
          this.editbookForm.patchValue({
            title: this.book.title,
            author: this.book.author
          });
        });
    }
  }

如果可行，请逐步添加验证和其他您喜欢的内容。 例如：

    <div *ngIf="submitted && editbookForm.controls.author.errors" class="error">
        <div *ngIf="editbookForm.controls.author.errors.required">Required</div>
    </div>

和

<div *ngIf="book" class="bookdetail-block">
  <div *ngFor="let bookdetail of book" class="bookdetail">
<h1>Edit Book</h1>

等等。

Answer 2

不要使用 ngFor 将值插入到 html 输入中。使用角度补丁法。

例如：

this.bookForm.patchValue({
    title: this.book.title,
    author: this.book.author
});

你也可以在表单上初始化值：

this.bookForm({
    title:[this.book.title],
    author:[this.book.author]
});