如何解决如何使用formly在没有formControl的情况下创建自定义模板?
有人知道如何使用 ngx-formly 在没有 formControl 的情况下创建简单的自定义模板的更好方法吗?
我在这个例子中实现了:
1. app.module.ts
import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { AppComponent } from './app.component';
import { CustomComponent } from './custom.component';
@NgModule({
imports: [
browserModule,ReactiveFormsModule,FormlyBootstrapModule,FormlyModule.forRoot({
types: [
{ name: 'custom',component: CustomComponent }
]
}),],bootstrap: [AppComponent],declarations: [
AppComponent,CustomComponent
],})
export class AppModule {}
2. app.component
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions,FormlyFieldConfig } from '@ngx-formly/core';
@Component({
selector: 'formly-app-example',template: '<form [formGroup]="form" (ngSubmit)="submit()">
<formly-form [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>
<button *ngIf="fields[0].type !== 'custom'" type="submit" class="btn btn-primary submit-button">Submit</button>
</form>',})
export class AppComponent {
form = new FormGroup({});
model: any = {};
options: FormlyFormOptions = {};
fields: FormlyFieldConfig[] = [
{
type: 'custom',templateOptions: {
label: 'Title',description: 'Custom description',}
}
];
submit() {
if (this.form.valid) {
alert(JSON.stringify(this.model));
}
}
}
3. custom.component.ts
import { FieldType } from '@ngx-formly/core';
@Component({
selector: 'custom',template: '<p>{{to.label}}</p>
<p>{{to.description}}</p>'
})
export class CustomComponent extends FieldType {}
感谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。