如何通过验证以角形式显示默认值？

Question

我对这份表格有些困难。

我正在尝试创建一个表单，它可以在开始时验证并显示默认值。我所面临的问题：

1. 一旦我添加行"formControlName"=price、"formControlName"=description、"formControlName"=name，该值就不再显示在屏幕上。

在添加"formControlName“值可以显示行之前

在添加"form ControlName“具有有效性，但即使在窗体有效之后也不能发出警报。行之后

1. 当删除在html文件中设置的值并输入新值时，无法正确验证表单。此窗体不像预期的那样触发警报对话。

代码(HTML)

<div class="container">
  <h2>Edit Product Details</h2>


  <form [formGroup]="updateProductForm" (ngSubmit)="submit()">
    <label for="pname">Product Name:</label><br>
    <input type="text" id="pname" name="pname" value={{products.name}}><br>
    <!-- error lies here -->
    <div class="error-list" *ngIf="fc.pname.errors && isSubmitted">
      <div *ngIf="fc.pname.errors.required">Should not be empty</div>


    </div>
    <label for="price">Unit Price:</label><br>
    <input type="text" id="price" name="price" value={{products.price}}><br>
    <!-- error lies here -->
    <div class="error-list" *ngIf="fc.price.errors && isSubmitted">
      <div *ngIf="fc.price.errors.required">Should not be empty</div>


    </div>

    <label for="price">Product Description:</label><br>
    <textarea type="text" style="overflow: scroll; height: 200px; width: 500px;" value={{products.description}}
      id="description" name="description"> </textarea><br>
    <div class="error-list" *ngIf="fc.description.errors && isSubmitted">
      <div *ngIf="fc.description.errors.required">Should not be empty</div>


    </div>
    <label for="img">Change Display Image:</label><br>
    <input type="file" id="img" name="img" accept="image/*"><br><br>
    <button type="submit">Update Product Details</button>
    <button style="margin-left: 10px;">Delete Product</button>
  </form>
</div>

代码(类型-脚本)

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { CartService } from '../cart.service';
import { FavService } from '../fav.service';
import { products } from '../models/products';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-update-delete-product',
  templateUrl: './update-delete-product.component.html',
  styleUrls: ['./update-delete-product.component.css']
})
export class UpdateDeleteProductComponent implements OnInit {
  updateProductForm!: FormGroup;
  isSubmitted = false;
  products!: products;
  constructor(private activatedRoute: ActivatedRoute, private productService: ProductsService,
    private cartService: CartService, private router: Router, private formbuilder: FormBuilder) {
    activatedRoute.params.subscribe((params) => {
      if (params.id)
        this.products = productService.getProductsById(params.id)
    }
    )
  }

  ngOnInit(): void {
    this.updateProductForm = this.formbuilder.group({
      pname: ['', [Validators.required]],
      price: ['', Validators.required],
      description: ['', Validators.required]

    });
  }
  get fc() {
    return this.updateProductForm.controls;
  }
  submit() {
    this.isSubmitted = true;
    if (this.updateProductForm.valid) return alert(`You have succefully updated the form!`)
    // alert (`email: ${this.fc.email.value},
    // password: ${this.fc.password.value}`)
  }

}

Answer 1

回答

1. 一旦我添加行"formControlName"=price、"formControlName"=description、"formControlName"=name，该值就不再显示在屏幕上。

而不是这个

<input type="text" id="pname" name="pname" value={{products.name}}>

按照我为所有输入编写的正确名称执行操作

<input type="text" id="pname" formControlName="pname">

应该正常工作

1. 当删除在html文件中设置的值并输入新值时，无法正确验证表单。此窗体不像预期的那样触发警报对话。

这是因为，由于没有将每个输入与正确的控件关联到formControlName属性，因此表单无法找到它所期望的数据，而且由于该不执行验证。

在修复了第一点之后，验证也应该可以正常工作。

有关更多信息，请参阅正式文件，它非常清楚和有用。

附加提示

设置各种控件中的默认值，而不是这样做。

<input type="text" id="pname" formControlName="pname" value={{products.name}}>

删除值属性和执行此

 this.formbuilder.group({
  pname: [products.name, Validators.required], // first parameter represents the default value
  price: [products.price, Validators.required],
  description: [products.description, Validators.required],
});

在您的示例中，您通过constructor()通过productService检索产品数据，因此当调用onInit()时，您应该已经在products中获得了数据。

有关此问题的更多信息，请参见此StackOverflow答案

希望我能帮上忙，让我知道是怎么回事！)