如何在不模拟焦点事件的情况下触发 Clarity 表单验证？

Question

如何触发新的 Clarity 0.13 表单的验证？我正在使用反应式表单，我想在没有 focusing/unfocusing 输入的情况下触发验证。当用户在完成表单之前点击 "Save" 时，这在我的应用程序中是必需的。目前我想不出一种方法来触发 Clarity 错误状态而不触发 DOM 元素上的实际模糊事件，这对于这样一个简单的任务来说似乎很复杂。

这是一个 stackblitz，您可以在其中重现问题：https://stackblitz.com/edit/clarity-light-theme-v013-6s2qtq

点击"Validate Form"自然没有任何反应，因为我不知道在函数中调用什么..

Answer 1

import { Component, OnInit,Input } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

  @Input() awesomeForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {

    this.awesomeForm = this.fb.group({
      awesome: ['', Validators.required]
    })  
   this.awesomeForm.valueChanges.subscribe(changes => {
    // do what you need with the form fields here
    // you can access a form field via changes.fieldName
    this.validateForm(changes);
    });
  }
  public resetForm() {
    this.awesomeForm.reset();
    console.log('Error state is still active. :(');
  }

  public validateForm(changes: any) {
    console.log('How to trigger validation without hacking focus events on the dom element?');
    console.log('triggered and got changes',changes)
  }

}

您可以订阅 FormGroup object valueChanges observable 并且它包含您表单上的所有字段，一旦您获得字段值，您基本上可以在每个字段更改方法上触发验证函数并将其传递给 validateForm(changes:any)

Answer 2

最新版本支持将清晰度表标记为脏 - 引用文档：

import {ViewChild, Component} from "@angular/core";
import {FormGroup, FormControl, Validators} from "@angular/forms";

@Component({
    template: `
    <form clrForm [formGroup]="exampleForm">
        <input clrInput formControlName="sample" />
        <button class="btn btn-primary" type="submit" (click)="submit()">Submit</button>
    </form>
    `
})
export class ReactiveFormsDemo {
    @ViewChild(ClrForm) clrForm;

    exampleForm = new FormGroup({
        sample: new FormControl('', Validators.required),
    });

    submit() {
        if (this.exampleForm.invalid) {
            this.clrForm.markAsDirty();
        } else {
            // ...
        }
    }
}

如何在不模拟焦点事件的情况下触发 Clarity 表单验证？

How to trigger Clarity form validation without simulating focus events?

angular

vmware-clarity

clarity