-1

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

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

单击“验证表单”时自然不会发生任何事情，因为我不知道在函数中调用什么..

4

2 回答 2

0 
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)
  }

}

您可以订阅FormGroupobject valueChangesobservable 并且它具有表单上存在的所有字段，一旦您获得字段值，您基本上可以在每个字段更改方法上触发您的验证功能并将其传递给validateForm(changes:any)

于 2018-09-22T19:18:30.387 回答
0

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

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 {
            // ...
        }
    }
}
于 2019-02-15T08:18:05.213 回答