如何解决@ngx-fomly 验证在自定义输入中不起作用
我将 NGX-FOrmlY @ngx-formly/bootstrap: "^5.0.0" 用于动态表单。它正在使用默认输入类型。但在自定义输入的情况下不起作用。
我的自定义Input.ts
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
@Component({
selector: 'formly-field-input',template: `
<input [type]="to.type" class="form-control" [formControl]="formControl" [formlyAttributes]="field" [required]=to.required placeholder="{{to.label}}">
`,})
export class FormlyFieldInput extends FieldType {}
我的AppModule.ts
import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { InputWrapperComponent } from './formlyComponents/inputWrapper';
import { FormlyFieldInput } from './formlyComponents/input';
export function minlengthValidationMessage(err,field) {
return `Should have atleast ${field.templateOptions.minLength} characters`;
}
export function requiredMessage(err,field) {
return `${field.templateOptions.label} field is required`;
}
export function maxlengthValidationMessage(err,field) {
return `This value should be less than ${field.templateOptions.maxLength} characters`;
}
export function minValidationMessage(err,field) {
return `This value should be more than ${field.templateOptions.min}`;
}
export function maxValidationMessage(err,field) {
return `This value should be less than ${field.templateOptions.max}`;
}
@NgModule({
declarations: [
AppComponent,ServerComponent,HeaderComponent,DropdownDirective,],imports: [
browserModule,HttpClientModule,FormsModule,AppRoutingModule,ReactiveFormsModule,FormlyModule.forRoot({
extras: { lazyRender: true },wrappers: [
{ name: 'inputWrapper',component: InputWrapperComponent },types: [
{ name: 'input',component: FormlyFieldInput },validationMessages: [
{ name: 'required',message: requiredMessage },{ name: 'minlength',message: minlengthValidationMessage },{ name: 'maxlength',message: maxlengthValidationMessage },{ name: 'min',message: minValidationMessage },{ name: 'max',message: maxValidationMessage },}),FormlyBootstrapModule,})
export class AppModule { }
我的InputWrapper.ts
import { Component,ViewChild,ViewContainerRef } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
//import { FormlyFieldInput } from './input';
@Component({
selector: 'formly-wrapper-panel',template: `
<ng-container #fieldComponent></ng-container>
<label for='{{ to.label }}'>{{ to.label }}</label>
`,})
export class InputWrapperComponent extends FieldWrapper {
}
我的DynamicForm.ts
import { Component,OnInit } from '@angular/core';
import {FormGroup} from '@angular/forms';
import {FormlyFieldConfig} from '@ngx-formly/core';
@Component({
selector: 'app-dynamic-form-demo',templateUrl: './dynamic-form-demo.component.html',styleUrls: ['./dynamic-form-demo.component.css']
})
export class DynamicFormDemoComponent implements OnInit {
form = new FormGroup({});
model = {
email:'anil@anil.com',name:'anil',amount:12333,active:1,};
// email: 'email@gmail.com'
fields: FormlyFieldConfig[] = [
{
fieldGroupClassName: 'row',fieldGroup: [{
wrappers:['inputWrapper'],key: 'name',type: 'input',className:'col-md-6',templateOptions: {
label: 'Name',type: 'text',placeholder: 'Enter name',required: true,}
},{
key: 'email',wrappers:['inputWrapper'],templateOptions: {
type: 'email',label: 'Email',placeholder: 'Enter email',{
key: 'amount',templateOptions: {
type: 'number',label: 'Amount',placeholder: 'Enter amount',{
key: 'description',type: 'textarea',templateOptions: {
label: 'Description',placeholder: 'Placeholder',{
key: 'active',type: 'radio',templateOptions: {
label: 'Is Active',options: [
{ value: 1,label: 'Yes' },{ value: 2,label: 'No' },},]
}
];
onSubmit(model){
console.log(model)
}
constructor() { }
ngOnInit(): void {
}
}
它显示给定类型的输入,例如:
<input class="form-control" placeholder="Name" type="text" required="">
但质朴的触摸提交不起作用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。