如何让我的编辑表单组件从 Angular 中的 html 获取值？

Question

我有一个列表详细信息页面，其中包含图片网址、标题、电话号码、描述和价格。单击“编辑”后，您将进入一个页面，其中每个页面都有一个输入表单，它还会接收列表先前的值，并使用[值]自动将它们填充到输入字段中。当我单击“编辑”按钮时，即使输入不为空，它们也会更新为空字段。但是，如果我更改任何输入文本，则只有它们在更新时才会更改，其余部分将变为空。例如，如果挂牌价格为 100 美元，我将其更改为 101 美元，则编辑时所有其他值都会变为空，只有价格正确更改为 101 美元。我对 Angular 和整个编码非常陌生，所以如果我做了一些非常错误的事情，我很抱歉，但我假设表单无法识别[值]，除非手动更新？

我的组件代码：

export class EditListingComponent {
  listing = {} as Listing;

  constructor(private apiService: ApiService,private router: Router, private activeRoute: ActivatedRoute) {}

  ngOnInit(): void {
    this.activeRoute.params.subscribe((data)=> {
      const id = data['listingId'];
      this.apiService.getListing(id).subscribe((listing)=> {
        this.listing = listing;
      })
    })
  }

  editListing(form: NgForm) {
    if (form.invalid) {
      return;
    }
    const id = this.listing._id
    const {listingName, listingPhonenumber,listingPrice, listingImageUrl, listingDescription} = form.value;

    this.apiService.editListing(id , listingName, listingPhonenumber,listingPrice, listingImageUrl, listingDescription).subscribe(()=> {
      this.router.navigate(['/listings']);
    })
  }
}

我的 HTML：

<div class="edit-container">

    <form #form="ngForm" (ngSubmit)="editListing(form)" class="form">
        <h1 class="form__title">Edit Listing</h1>

        <div class="form__div">
            <input type="text" name="listingName" class="form__input" placeholder=" " #inputListingName="ngModel"
                ngModel [value]="listing.listingName" />
            <label class="form__label" for="listingName">Title</label>
        </div>

        <div class="form__div">
            <input type="text" name="listingPhonenumber" class="form__input" placeholder=" "
                #inputListingPhonenumber="ngModel" ngModel [value]="listing.listingPhonenumber" />
            <label class="form__label" for="listingPhonenumber">Phone Number</label>
        </div>

        <div class="form__div">
            <input type="number" name="listingPrice" class="form__input" placeholder=" " #inputListingPrice="ngModel"
                ngModel [value]="listing.listingPrice" />
            <label class="form__label" for="listingPrice">Price</label>
        </div>

        <div class="form__div">
            <input type="text" name="listingImageUrl" class="form__input" placeholder=" "
                #inputListingImageUrl="ngModel" ngModel [value]="listing.listingImageUrl" />
            <label class="form__label" for="listingImageUrl">Image</label>
        </div>

        <div class="form__div">
            <input type="text" name="listingDescription" class="form__input" placeholder=" "
                #inputListingDescription="ngModel" ngModel [value]="listing.listingDescription" />
            <label class="form__label" for="listingDescription">Description</label>
        </div>

        <div class="div__submit">
            <input type="submit" class="form__button" value="EDIT" />
        </div>

    </form>
</div>

Answer 1

我建议使用

FormsModule

和

ReactiveFormsModule

。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiService, Listing } from 'your-models-and-services'; // Import your types
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-edit-listing',
  templateUrl: './edit-listing.component.html',
  styleUrls: ['./edit-listing.component.css']
})
export class EditListingComponent implements OnInit {
  listingForm: FormGroup;
  listing: Listing; // Assuming Listing is your listing data type

  constructor(
    private fb: FormBuilder,
    private apiService: ApiService,
    private router: Router,
    private activeRoute: ActivatedRoute
  ) {}

ngOnInit() {
  this.activeRoute.params.subscribe((data) => {
    const id = data['listingId'];
    this.apiService.getListing(id).subscribe((listing) => {
      this.listing = listing;
      this.buildForm(); // Call form building function after data retrieval
    });
  });
}

buildForm() {
  this.listingForm = this.fb.group({
    listingName: [this.listing.listingName, Validators.required],
    listingPhonenumber: [this.listing.listingPhonenumber, Validators.required],
    listingPrice: [this.listing.listingPrice, Validators.required],
    listingImageUrl: [this.listing.listingImageUrl], // Optional validation
    listingDescription: [this.listing.listingDescription]
  });
}

editListing() {
  if (this.listingForm.invalid) {
    return;
  }

  const formData = this.listingForm.value; // Access form values using value property
  // Edit listing using formData
  this.apiService.editListing(
    this.listing._id,
    formData.listingName,
    formData.listingPhonenumber,
    formData.listingPrice,
    formData.listingImageUrl,
    formData.listingDescription
  ).subscribe(() => {
    this.router.navigate(['/listings']);
  });
 }
}

在模板中使用它的示例：

<form [formGroup]="listingForm" (ngSubmit)="editListing()">
  <div class="form__div">
    <input
      type="text"
      name="listingName"
      class="form__input"
      placeholder=" "
      formControlName="listingName"
    />
    <label class="form__label" for="listingName">Title</label>
  </div>

  <div class="div__submit">
    <input type="submit" class="form__button" value="EDIT" />
  </div>
</form>