Значение угловой реактивной формы пусто

Question

В моем проекте Angular у меня есть компонент Product, который содержит Реактивную форму:

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 возникает необходимая ошибка.

Обратите внимание, если я вручную введу значение в поля, это нормально. оно пусто, только если значение задается с помощью [value] в HTML-коде, и не изменяется вручную.

Есть идеи?

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 -->