@ngx-foml​​y 验证在自定义输入中不起作用

问题描述

我将 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:'[e-mail]',name:'anil',amount:12333,active:1,};
  // email: '[e-mail]'
  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 (将#修改为@）