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

【问题标题】：Radio buttons in angular 9 reactive forms角度 9 反应形式的单选按钮
【发布时间】：2020-07-18 17:07:50
【问题描述】：

我无法将单选按钮设置为表单的一部分，因此无法在 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]
       });

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

请提出建议。

【问题讨论】：

标签： angular angular-reactive-forms angular9

【解决方案1】：

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

为每个输入创建动态 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 Docs 的更多信息。

【讨论】：