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

Question

如果用户在提交表单时未选择任何选项，我想在 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;
  }
}

Answer 1

如果您使用 ReactiveForm 或 [(ngModel)]，请勿使用 [checked]。根据 FormControl 的值，角度检查是否单选按钮。

我不可能知道你的“elements”、“a”或“e.index”是什么，但如果 FormControl 有 Validators.required 则无效，如果你不选择任何内容。另一个是你想在提交时显示一条消息。如果您有类似的表格，则可以使用

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

你可以使用一些像

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

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

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

}