Запуск проверки ngForm сразу же после того, как форма будет отображена и загружена - PullRequest
0 голосов
/ 28 июня 2019

Я имею в виду проверить ngFrom, имеющий дочерний компонент с динамически сгенерированными элементами управления с валидатором регулярных выражений. Проверка работает после загрузки формы и запуска пользовательского события. Но когда форма загружается впервые, если значение (поступающее из БД) неверно с проверкой регулярного выражения, не запускается и помечает элемент управления / форму как недействительный.

Можно ли запустить проверку сразу после ngForm DOM отображается со всеми значениями и проверками? или как проверить сам элемент управления сразу его динамически генерируется с помощью валидатора и значения?

Ниже приведены мои настройки.

ngForm

<form #nmProgrammingParameterForm="ngForm" (ngSubmit)="onSubmit()">              
    <div class="col-4">
        <rtms-dynamic-field [(model)]="parameter.dataValue" [field]="parameter"
        [form]="frmProgramming"></rtms-dynamic-field>
    </div>
    <div class="form-group d-flex">
        <button class="btn btn-outline-primary ml-auto" type="submit"
        [disabled]="!frmProgramming.valid">
        <span class="fa fa-check-circle"></span>
        Save Changes
        </button>
    </div>
</form>

дочерний компонент

<div [ngSwitch]="field.dataControlType">
  <input kendoTextBox *ngSwitchDefault class="form-control" type="text" 
    [id]="field.id"
    [name]="field.description" 
    [type]="field.dataType" 
    [pattern]="validationRegex"
    [required]="required ? 'required' : null"
    [(ngModel)]="model" 
    (input)="onInputChange()">  
  <div class="alert alert-danger" style="margin-top:5px"
      name="ValidationMessage" *ngIf="notValid">{{errorMessage}}</div>
</div>
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormGroup, ControlContainer, NgForm} from '@angular/forms';
import {DynamicField} from '../_models/dynamicField';

@Component({
  selector: 'rtms-dynamic-field',
  templateUrl: './dynamic-field.html',
  styleUrls: ['./dynamic-field.css'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})

export class DynamicFieldComponent implements OnInit {
  @Input() field: DynamicField;
  @Input() form: FormGroup;  
  public _isLoading = true; 
  notValid = false; // setting it to false hide Validation messages initially
  validationRegex: string;
  required: boolean;
  errorMessage: string;
  constructor(public dataService: DataService) {
  }

  public ngOnInit(): any {
    this.setValidations();
  }

  onInputChange()  {
    if (this.field.description in this.form.controls) {
      this.notValid = !this.form.controls[this.field.description].valid;
      console.log(this.notValid);
    }
  }

  setValidations()  {
    if (this.field.validationRule !== null) {
      this.validationRegex = this.field.validationRule.regex;
      this.required = this.field.validationRule.required;
      this.errorMessage = this.field.validationRule.errorMessage;
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...