Angular-单选组的反应形式验证

1990年

如果用户在提交表单时未选择任何选项,我想在mat-radio-group上添加验证。这是我到目前为止所做的,但是没有用。

<mat-radio-group  formControlName="{{e.Index}}">
    <mat-label>{{ et.Title }}</mat-label>
    <mat-radio-button *ngFor="let tq of e.Items" [value]="tq" [checked]="tq.IsSelected">
      {{tq.Name}}
    </mat-radio-button>
</mat-radio-group>

TS

elements.forEach((e, i) => {
  case form.id: {
    if (e.Required) {
      a = { [name]: new FormControl('', Validators.required) };
    } else {
      a = { [name]: new FormControl('') };
    }
    
    etc ...
    break;
  }
}
埃利索

如果您使用ReactiveForm或[[ngModel)],请不要使用[选中]。角度检查是否根据FormControl的值选择单选按钮。

对我来说,不可能知道您的“元素”,“ a”或“ e.index”是什么,但是如果FormControl具有Validators.required,则如果您不选择任何内容,则将无效。其他是您要在提交时显示一条消息。您可以使用以下形式

form=new FormGroup({
    control:new FormControl('',Validators.required)
  })

你可以用一些像

    <form [formGroup]="form">
        <mat-radio-group aria-label="Select an option" formControlName="control">
            <mat-radio-button value="1">Option 1</mat-radio-button>
            <mat-radio-button value="2">Option 2</mat-radio-button>
            <!--I used if is "touched" to don't show the error until submit-->
            <mat-error *ngIf="form.get('control').touched">Required</mat-error>
        </mat-radio-group>
        <button (click)="submit(form)">submit</button>
    </form>

并且不要忘记在提交中将所有控件标记为已触摸

submit(form)
{
     if (form.isValid)
     {
           ....
     }else
         form.markAllAsTouched()
      

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更新Angular反应形式的验证器

来自分类Dev

Angular 2反应形式详细验证

来自分类Dev

Angular10反应形式验证同时在模糊和提交

来自分类Dev

Angular 2 - 稍后在反应形式数组中设置验证

来自分类Dev

Angular7 反应形式材料时间输入验证

来自分类Dev

Angular反应形式模板

来自分类Dev

Angular反应形式从fb组发送数据作为一个数据

来自分类Dev

嵌套反应形式(Angular 5)

来自分类Dev

Angular7。不要第一次以反应形式检查验证

来自分类Dev

在使用反应形式取消Angular中的输入字段后如何触发异步验证器?

来自分类Dev

反应形式的条件自定义验证不起作用-Angular 9

来自分类Dev

带有反应形式的 angular 4 表单验证不起作用

来自分类Dev

Angular 2+形式的布尔单选按钮

来自分类Dev

如何验证 angular 2 形式

来自分类Dev

使用Angular验证单选按钮的选择

来自分类Dev

在Angular的反应形式中输入Type =“ Range”

来自分类Dev

如何从Angular反应形式中删除字段?

来自分类Dev

子组件中的Angular反应形式提交

来自分类Dev

Angular反应形式多个文件上传

来自分类Dev

密码必须与Angular中的反应形式匹配

来自分类Dev

Angular 反应形式正在提交而不提交

来自分类Dev

Angular 如何根据是否使用反应式表单选中复选框来更改表单控件或表单组的有效性

来自分类Dev

从验证中重置Angular 9反应性

来自分类Dev

反应形式:使用 angular 4 注入形式值服务

来自分类Dev

如何使用angular js验证离子形式

来自分类Dev

单选组选择的选项不更新Angular中的ngModel值

来自分类Dev

角反应形式验证

来自分类Dev

使用Angular验证选择字段和单选按钮

来自分类Dev

单选按钮验证不起作用Angular JS

Related 相关文章

热门标签

归档