Как запустить проверку формы Clarity без симуляции событий фокуса? - PullRequest
Новая
       12

Как запустить проверку формы Clarity без симуляции событий фокуса?

0 голосов
/ 22 сентября 2018

Как я могу запустить проверку новых форм Clarity 0.13?Я использую реактивные формы и хочу запустить валидацию, не фокусируя / не фокусируя входные данные.Это будет необходимо в моем приложении, когда пользователь нажимает «Сохранить» перед заполнением формы.В настоящее время я не могу придумать способ вызвать состояние ошибки Clarity без запуска фактических событий размытия на элементах DOM, что кажется слишком сложным для такой простой задачи.

Вот фрагмент стека, где вы можете воспроизвести проблему: https://stackblitz.com/edit/clarity-light-theme-v013-6s2qtq

Естественно, ничего не происходит при нажатии «Проверить форму», потому что я не знаю, что вызывать в функции ..

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Новейшая версия поддерживает маркировку форм ясности как грязных - со ссылкой на документы: 

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 {
            // ...
        }
    }
}
0 голосов
/ 22 сентября 2018 
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)

...