Question

在Angular项目中，我有一个Product组件，其中包含一个Reactive Form：

this.productForm = this.formBuilder.group({
       prodid: ['', [Validators.required]],
       prodname: ['', [Validators.required]],
       prodprice: ['', [Validators.required, Validators.pattern(/^[.\d]+$/)]],
       picture: ['', [Validators.required]],
       category: ['', [Validators.required]]
   });

在HTML页面中，我使用[value]设置字段的值，如下所示：

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label>Id</label>
            <input type="text" formControlName="prodid" class="form-control" readonly [value]="currentProduct!=null?currentProduct.product_id:null" />
        </div>
        <div class="form-group">
            <label>Name</label>
            <input type="text" formControlName="prodname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prodname.errors }"
             [value]="currentProduct!=null?currentProduct.product_name:null" />
            <div *ngIf="submitted && f.prodname.errors" class="invalid-feedback">
                <div *ngIf="f.prodname.errors.required">Name is required</div>
            </div>
        </div>

        <div class="form-group">
            <label>Price</label>
            <input type="number" formControlName="prodprice" class="form-control" 
             [ngClass]="{ 'is-invalid': submitted && f.prodprice.errors }" step="0.01" 
             [value]="currentProduct!=null?currentProduct.price:null" />
            <div *ngIf="submitted && f.prodprice.errors" class="invalid-feedback">
                <div *ngIf="f.prodprice.errors.required">Price is required</div>
                <div *ngIf="f.prodprice.errors.pattern">Price is invalid</div>
            </div>
        </div>
        <div class="form-group">
            <label>Picture Path</label>
            <input type="text" formControlName="picture" class="form-control" 
             [ngClass]="{ 'is-invalid': submitted && f.picture.errors }" 
             [value]="currentProduct!=null?currentProduct.img_path:null" />
            <div *ngIf="submitted && f.picture.errors" class="invalid-feedback">
                <div *ngIf="f.picture.errors.required">Picture Path is required</div>
            </div>
        </div>
        <div class="form-group">
            <label>Category</label>
            <select formControlName="category" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.category.errors }" 
             [value]="currentProduct!=null?currentProduct.category_id:null">
                <option  *ngFor="let cat of arrCategories" value="{{cat.id}}" >{{cat.name}}</option>
            </select>
            <div *ngIf="submitted && f.category.errors" class="invalid-feedback">
                <div *ngIf="f.category.errors.required">Category is required</div>
            </div>
        </div>
        {{productForm.value | json }}

使用正确的值正确显示字段值，但是{{productForm.value}}为空，并且当按下Submit时，将引发所需的错误。

请注意，如果我在字段中手动输入一个值，就可以了。仅当该值是由html代码中的[value]设置且未手动更改时，它为空。

有什么主意吗？

Answer 1

您可以为您的反应形式提供一个初始值。您可以在Stackblitz

上查看此示例

此外，您还需要为选项提供 ngValue 的值。

this.productForm = this.formBuilder.group({
       prodid: [currentProduct? currentProduct.product_id:null, [Validators.required]],
       prodname: [currentProduct? currentProduct.product_name:null, [Validators.required]],
       prodprice: [currentProduct? currentProduct.price:null, [Validators.required, Validators.pattern(/^[.\d]+$/)]],
       picture: [currentProduct? currentProduct.img_path:null, [Validators.required]],
       category: [currentProduct? currentProduct.category_id:null, [Validators.required]]
   });

要动态更改表单值，可以使用 pathValue ，如下所示；

  setFormData(){
    const newValue = {
    prodid: "newId",
    prodname: "newName",
    prodprice: "12346567",
    picture: "newPicture",
    category: "2"
    };
    this.productForm.patchValue(newValue);
  }

在模板上，您不再需要使用值。

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label>Id</label>
            <input type="text" formControlName="prodid" class="form-control" readonly />
        </div>
        <div class="form-group">
            <label>Name</label>
            <input type="text" formControlName="prodname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.prodname.errors }" />
            <div *ngIf="submitted && f.prodname.errors" class="invalid-feedback">
                <div *ngIf="f.prodname.errors.required">Name is required</div>
            </div>
        </div>

        <div class="form-group">
            <label>Price</label>
            <input type="number" formControlName="prodprice" class="form-control" 
             [ngClass]="{ 'is-invalid': submitted && f.prodprice.errors }" step="0.01" />
            <div *ngIf="submitted && f.prodprice.errors" class="invalid-feedback">
                <div *ngIf="f.prodprice.errors.required">Price is required</div>
                <div *ngIf="f.prodprice.errors.pattern">Price is invalid</div>
            </div>
        </div>
        <div class="form-group">
            <label>Picture Path</label>
            <input type="text" formControlName="picture" class="form-control" 
             [ngClass]="{ 'is-invalid': submitted && f.picture.errors }" />
            <div *ngIf="submitted && f.picture.errors" class="invalid-feedback">
                <div *ngIf="f.picture.errors.required">Picture Path is required</div>
            </div>
        </div>
        <div class="form-group">
            <label>Category</label>
            <select formControlName="category" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.category.errors }" >
                <option  *ngFor="let cat of arrCategories" [ngValue]="cat.value" >{{cat.name}}</option>
            </select>
            <div *ngIf="submitted && f.category.errors" class="invalid-feedback">
                <div *ngIf="f.category.errors.required">Category is required</div>
            </div>
        </div>
        {{productForm.value | json }}
    <button type="button" (click) ="setFormData()">Change Form Data</button> <!-- this button for change form data dynamically -->

角反应式值是空的

1 个答案: