Question

如何触发新的Clarity 0.13表格的验证？我正在使用反应式表单，我想触发验证而无需实际集中/分散输入。当用户在填写表格之前单击“保存”时，这在我的应用程序中将是必需的。目前，我想不出一种方法来触发Clarity错误状态，而又不会触发DOM元素上的实际模糊事件，这对于这样一个简单的任务来说似乎很复杂。

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

自然，当单击“验证表单”时什么也没有发生，因为我不知道该函数要调用什么。

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对象valueChanges可观察的对象，并且该对象在表单上具有所有字段，一旦获得字段值，就可以基本上在每种字段更改方法上触发验证函数并传递放在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表单验证？

2 个答案: