Я имею в виду проверить 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;
}
}
}