typescript – 如何解决使用大量自定义组件创建复杂表单的问题?

前端之家收集整理的这篇文章主要介绍了typescript – 如何解决使用大量自定义组件创建复杂表单的问题?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我从angular2 app生成的html看起来像这样:
  1. <app>
  2. <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
  3. <panel-component>
  4. <mid-component>
  5. <inner-component-with-inputs>
  6. <input/>
  7. <inner-component-with-inputs>
  8. <mid-component>
  9. </panel-component>
  10. <panel-component>
  11. <mid-component>
  12. <inner-component-with-inputs>
  13. <input/>
  14. <inner-component-with-inputs>
  15. <mid-component>
  16. </panel-component>
  17.  
  18. <!-- many many many fields -->
  19.  
  20. <button type="submit">Submit</button>
  21. </form>
  22. </app>

如何设置外部< form>以这种方式我可以在提交时验证所有内部输入?我是否必须通过@Input()将myForm从面板组件一直传递到内部组件与输入?或者还有其他方式吗?

在我的应用程序中,我有非常大的形式,有多个面板,子面板,标签,模态等.我需要能够在提交时立即验证它.

互联网上的所有教程和资源仅涉及跨越一个组件/模板的表单.

解决方法

当涉及父/子关系时,您将在整个Angular源代码中看到的常见模式是父类型,将自身添加为自身的提供者.这样做是允许子组件注入父组件.由于 hierarchical DI,在组件树中只会有一个父组件的实例.下面是一个可能看起来像的例子
  1. export abstract class FormControlContainer {
  2. abstract addControl(name: string,control: FormControl): void;
  3. abstract removeControl(name: string): void;
  4. }
  5.  
  6. export const formGroupContainerProvider: any = {
  7. provide: FormControlContainer,useExisting: forwardRef(() => NestedFormComponentsComponent)
  8. };
  9.  
  10. @Component({
  11. selector: 'nested-form-components',template: `
  12. ...
  13. `,directives: [REACTIVE_FORM_DIRECTIVES,ChildComponent],providers: [formGroupContainerProvider]
  14. })
  15. export class ParentComponent implements FormControlContainer {
  16. form: FormGroup = new FormGroup({});
  17.  
  18. addControl(name: string,control: FormControl) {
  19. this.form.addControl(name,control);
  20. }
  21.  
  22. removeControl(name: string) {
  23. this.form.removeControl(name);
  24. }
  25. }

一些说明:

>我们使用接口/抽象父(FormControlContainer)有几个原因

>它将ParentComponent与ChildComponent分离.孩子不需要知道关于特定ParentComponent的任何信息.所有它知道的是FormControlContainer和合同.
>我们只通过接口契约在ParentComponent上公开需要的方法.

>我们只将ParentComponent宣传为FormControlContainer,因此后者是我们将注入的内容.
>我们以formControlContainerProvider的形式创建提供程序,然后将该提供程序添加到ParentComponent.由于分层DI,现在所有孩子都可以访问父母.
>如果您不熟悉forwardRef,this is a great article

现在,你可以做孩子

  1. @Component({
  2. selector: 'child-component',directives: [REACTIVE_FORM_DIRECTIVES]
  3. })
  4. export class ChildComponent implements OnDestroy {
  5. firstName: FormControl;
  6. lastName: FormControl;
  7.  
  8. constructor(private _parent: FormControlContainer) {
  9. this.firstName = new FormControl('',Validators.required);
  10. this.lastName = new FormControl('',Validators.required);
  11. this._parent.addControl('firstName',this.firstName);
  12. this._parent.addControl('lastName',this.lastName);
  13. }
  14.  
  15. ngOnDestroy() {
  16. this._parent.removeControl('firstName');
  17. this._parent.removeControl('lastName');
  18. }
  19. }

IMO,这比通过@Inputs传递FormGroup要好得多.如前所述,这是Angular源代码中的常见设计,因此我认为可以肯定地说这是一种可接受的模式.

如果要使子组件更可重用,可以创建构造函数参数@Optional().

以下是我用来测试上述例子的完整资料

  1. import {
  2. Component,OnInit,ViewChildren,QueryList,OnDestroy,forwardRef,Injector
  3. } from '@angular/core';
  4. import {
  5. FormControl,FormGroup,ControlContainer,Validators,FormGroupDirective,REACTIVE_FORM_DIRECTIVES
  6. } from '@angular/forms';
  7.  
  8.  
  9. export abstract class FormControlContainer {
  10. abstract addControl(name: string,template: `
  11. <form [formGroup]="form">
  12. <child-component></child-component>
  13. <div>
  14. <button type="button" (click)="onSubmit()">Submit</button>
  15. </div>
  16. </form>
  17. `,forwardRef(() => ChildComponent)],providers: [formGroupContainerProvider]
  18. })
  19. export class NestedFormComponentsComponent implements FormControlContainer {
  20.  
  21. form = new FormGroup({});
  22.  
  23. onSubmit(e) {
  24. if (!this.form.valid) {
  25. console.log('form is INVALID!')
  26. if (this.form.hasError('required',['firstName'])) {
  27. console.log('First name is required.');
  28. }
  29. if (this.form.hasError('required',['lastName'])) {
  30. console.log('Last name is required.');
  31. }
  32. } else {
  33. console.log('form is VALID!');
  34. }
  35. }
  36.  
  37. addControl(name: string,control: FormControl): void {
  38. this.form.addControl(name,control);
  39. }
  40.  
  41. removeControl(name: string): void {
  42. this.form.removeControl(name);
  43. }
  44. }
  45.  
  46. @Component({
  47. selector: 'child-component',template: `
  48. <div>
  49. <label for="firstName">First name:</label>
  50. <input id="firstName" [formControl]="firstName" type="text"/>
  51. </div>
  52. <div>
  53. <label for="lastName">Last name:</label>
  54. <input id="lastName" [formControl]="lastName" type="text"/>
  55. </div>
  56. `,this.lastName);
  57. }
  58.  
  59.  
  60. ngOnDestroy() {
  61. this._parent.removeControl('firstName');
  62. this._parent.removeControl('lastName');
  63. }
  64. }

猜你在找的TypeScript相关文章