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

8qgya5xd 于 2022-11-26 发布在 TypeScript

关注(0)|答案(4)|浏览(133)

我想知道如何检查复选框是否被选中，如果它没有被选中，一个错误消息将出现的用户。我设法把错误消息，但不能使用它沿着其余的形式。你能帮助我吗？这里是我必须做的。

<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>

文件

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,
  ]);

}

typescript

来源：https://stackoverflow.com/questions/50935481/how-to-do-validation-with-mat-checkbox

4条答案

按热度按时间

xbp102n01#

使用内置验证程序：Validators.requiredTrue

赞(0）回复(0）举报 2022-11-26

von4xj4u2#

复选框不是这样工作的，你必须实现自定义的验证器并赋值给你的termsFormControl。在你的例子中，它将是：

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

这里自定义验证器显式检查控件的值，如果为false，它将把required错误设置为true。这样，您就可以为窗体设置状态，并能够使用强大的功能。
请参阅GitHub上的以下issue以了解更多解释为什么必须实现自定义验证。

已编辑1

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

<mat-error *ngIf="termsFormControl.invalid && termsFormControl.dirty">
        Termo é <strong>requirido</strong>
</mat-error>

然后在按钮点击你可以设置复选框是脏的（我没有看到你的整个代码，但它应该是这样的东西）：

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

已编辑2

基于@Julida建议，内置验证器Validators.requiredTrue可用于checkbox元素它验证checkbox是否被选中如果未选中，它将控件标记为无效

赞(0）回复(0）举报 2022-11-26

3xiyfsfu3#

Required在这种情况下不起作用，因为从技术上讲false是一个值。因此，必须使用RequiredTrue，例如：

termsFormControl = new FormControl(false, [Validators.requiredTrue]);

尽管如此，如果需要检查是否已选中此选项，比如说显示一条消息，则必须验证required的错误：

get acceptTermsErrorMessage() {
    if (this.form.hasError('required', 'termsFormControl')) {
      return "You must accept the terms and conditions in order to continue;
    }

    return '';
  }

赞(0）回复(0）举报 2022-11-26

xxls0lw84#

<mat-checkbox 
 (change)="todoItemSelectionToggle($event)">{{node.item}}</mat-checkbox>

        In .ts file if event.checked is true checkbox is selected else viceversa

         todoItemSelectionToggle(event)
         {
         console.log = event.checked;
         }

赞(0）回复(0）举报 2022-11-26

我来回答

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

4条答案

相关问题

热门标签

最新问答