Angular 2单选按钮验证

Posted 2023-03-13

【中文标题】Angular 2单选按钮验证

【英文标题】：Angular 2 radio button validation

【发布时间】：2019-08-18 10:20:19

【问题描述】：

我正在尝试通过模板驱动验证 Angular 2 中的单选按钮但无法正常工作。我在 google 中搜索过也没有人正确回答。任何天才都可以回答这个问题吗？

https://stackblitz.com/edit/angular-zpyekb?file=src/app/app.component.html

app.component.html

 <form #f="ngForm"> 
<div *ngFor="let option of options">
<div class="radio">
<input type="radio"
           name="radio"
           id="radio-option.id"
           [(ngModel)]="value"
           [value]="option.value"/> 
    <label for="radio-option.id">option.id
    </label> 
 </div>
 </div>

 <div *ngIf="f.submitted">Please select</div>

 <button>Submit</button>
 </form>

【参考方案1】：

<div *ngFor="let option of options">
        <div class="radio">
            <input type="radio"
               name="radio"
               id="radio-option.id"
               [(ngModel)]="value"
               [value]="option.value"
               required

               /> 
        <label for="radio-option.id">option.id
        </label> 
    </div>
  </div>

  <div *ngIf="f.submitted && !f.valid">Please select</div>


May be you are looking for the above validation. If not can you please help to know what exactly you are looking for ?

【讨论】：

感谢您的回复..如果我在表单中仅使用一个单选按钮，您的代码将完美运行，但如果我在表单中使用更多文本框和复选框，您的代码将不支持，因为您已经使用了！ f.valid 这是对 common 的验证。

你能给我一个链接，你拥有所有的东西并需要验证，以便我可以提供解决方案

正是我想要看到的我的原始代码：stackblitz.com/edit/…

我已经创建了自定义单选按钮组件和复选框，然后我尝试使用 Angular 2 模板驱动验证进行验证