Question

我无法使单选按钮成为表单的一部分，因此无法在ui中显示字段必填错误。

下面是我的代码

                 <div class="form-group">
                    <label for="inputField" class="label">Product For</label><br>

                    <label *ngFor="let category of categories" class="radio-inline radio-label">
                        <input id="radio" type="radio" value="{{category.id}}" formControlName="categoryid"
                            name="categoryid" (change)="getAllProductSubtype()" 
                            [ngClass]="{ 'is-invalid': submittedP1 && f.categoryid.errors}" class="form-contorl">{{category.name}}
                    </label>

                    <div *ngIf="f.categoryid.errors" class="invalid-feedback">
                        <div *ngIf="f.categoryid.errors.required">Category is required!</div>
                    </div>


                </div>

               <div class="form-group">
                    <label for="inputField" class="label">Retail Price</label>
                    <input type="number" class="form-control" id="inputField" placeholder="Retail Price"
                        formControlName="retailprice"
                        [ngClass]="{ 'is-invalid': submittedP1 && f.retailprice.errors}">
                    <div *ngIf="f.retailprice.errors" class="invalid-feedback">
                        <div *ngIf="f.retailprice.errors.required">Retail Price is required!</div>
                    </div>

                </div>

       this.basicForm = this.formBuilder.group({
         name: ['', Validators.required],
         description: ['', Validators.required],
         producttypeid: ['', Validators.required],
         categoryid: ['', Validators.required],
         retailprice: ['', Validators.required]
       });

零售价格输入字段工作正常，并显示错误“需要零售价格！”但是类别对我不起作用。

请提出建议。

Answer 1

您有多个formControlName且具有相同名称的categoryId，这就是为什么它无法正常工作的原因。

为每个输入创建动态formControlNames，然后您将能够正确地验证它们。

 <label *ngFor="let category of categories" class="radio-inline radio-label">
     <input id="radio" type="radio" value="{{category.id}}" formControlName="categoryid + {{category.id}}" name="categoryid + {{category.id}}" (change)="getAllProductSubtype()" 
         [ngClass]="{ 'is-invalid': submittedP1 && f.categoryid.errors}" class="form-contorl">{{category.name}}
 </label>

看看这里了解有关Angular dynamic formControlName generate with fromGroup的更多信息。

您还可以在此处了解有关angular dynamic form文档的更多信息。

角度9反应形式的单选按钮

1 个答案: