2

我正在将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'],
        type: 'input',
        className:'col-md-6',
        templateOptions: {
          type: 'email',
          label: 'Email',
          placeholder: 'Enter email',
          required: true,
        }
      },
      {
        key: 'amount',
        type: 'input',
        className:'col-md-6',
        templateOptions: {
          type: 'number',
          label: 'Amount',
          placeholder: 'Enter amount',
          required: true,
        }
      },
      {
        key: 'description',
        type: 'textarea',
        className:'col-md-6',
        templateOptions: {
          label: 'Description',
          placeholder: 'Placeholder',
          required: true,
        }
      },
      {
        key: 'active',
        type: 'radio',className:'col-md-6',
        templateOptions: {
          label: 'Is Active',
          placeholder: 'Placeholder',
          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="">

但原始触摸提交不起作用

4

0 回答 0