如何使用 mat-checkbox 进行验证？

Question

我想知道如何检查复选框是否被选中，如果没有选中，则会向用户显示错误消息。我设法放置了错误消息，但无法将其与表单的其余部分一起使用。你能帮助我吗？这是我必须做的。

<mat-checkbox class="hcs-full-width" [formControl]="termsFormControl"> Aceite os termos de uso

</mat-checkbox>
<mat-error *ngIf="termsFormControl.hasError('required')">
    Termo é
    <strong>requirido</strong>
</mat-error>

.ts

export class AppComponent implements OnInit {

  private subscription: Subscription;
  uri: string;
  ssid: string;
  sessiondId: string;
  ip: string;
  mac: string;
  ufi: string;
  mgmtBaseUrl: string;
  clientRedirectUrl: string;
  req: string;
  userName: string;
  hmac: string;

  name: string;
  email: string;

  constructor(@Inject(DOCUMENT) private document: any, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.mac)
      .subscribe(params => {
        console.log(params);

        this.ssid = params.ssid;
        this.sessiondId = params.sessionId;
        this.ip = params.ip;
        this.mac = params.mac;
        this.ufi = params.ufi;
        this.mgmtBaseUrl = params.mgmtBaseUrl;
        this.clientRedirectUrl = params.clientRedirectUrl;
        this.req = params.req;
        this.hmac = params.hmac;
      });
      console.log("LOGAR: " + this.nameFormControl.valid);
    console.log("LOGAR: " + this.termsFormControl.valid);
  }

  Logar() {
    if (this.nameFormControl.valid && this.emailFormControl.valid && this.termsFormControl.valid) {
      this.userName = this.name + ";" + this.email;
      this.uri = "#" + this.ssid + "&sessionId=" + this.sessiondId + "&ip=" + this.ip + "&mac=" + this.mac + "&ufi=" + this.ufi + "&mgmtBaseUrl=" + this.mgmtBaseUrl + "&clientRedirectUrl=" + this.clientRedirectUrl + "&req=" + this.req + "&username=" + this.userName + "&hmac=" + this.hmac;
      // console.log("LOGAR: " + this.nameFormControl.valid);
      this.document.location.href = this.uri;
    }
    console.log("LOGAR: " + this.nameFormControl.valid);
    console.log("LOGAR: " + this.termsFormControl.valid);
  };

  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);

  nameFormControl = new FormControl('', [
    Validators.required,
  ]);

  termsFormControl = new FormControl('', [
    Validators.required,
  ]);

}

Answer 1

复选框不是这样工作的，您必须实现自定义验证器并分配给您的termsFormControl. 在你的情况下它将是：

\n\n

termsFormControl = new FormControl(\'\', [(control) => {    \n    return !control.value ? { \'required\': true } : null;\n  }]\n);\n

\n\n

这里自定义验证器显式检查控件的值，如果为 false ，则会将required错误设置为true。通过这种方式，您可以设置表单的状态并能够使用强大的功能。

\n\n

请参阅 GitHub 上的以下问题，了解为什么必须实施自定义验证的更多说明。

\n\n

编辑1

\n\n

要在单击按钮时显示错误消息，您可以设置条件以在复选框无效和脏时引发错误：

\n\n

<mat-error *ngIf="termsFormControl.invalid && termsFormControl.dirty">\n        Termo \xc3\xa9 <strong>requirido</strong>\n</mat-error>\n

\n\n

然后单击按钮，您可以将复选框设置为脏（我没有看到您的整个代码，但它应该是这样的）：

\n\n

onSubmit() {\n  this.form.get(\'termsFormControl \').markAsDirty();\n}\n

\n\n

编辑2

\n\n

根据 @Julida 建议，内置验证器 Validators.requiredTrue可用于复选框元素。它验证复选框是否已选中或未选中。如果未选中，则标记控件无效。

\n

Answer 2

使用内置验证器：Validators.requiredTrue