angular 高級表單拆分使用

我們在寫複雜結構的表單的時候, 想的是怎麼可以更好的偷懶且代碼結構簡化易於維護

表單傳給子代執行

父

<app-time-module-four  [formGroup]="validateForm"></app-time-module-four>

  validateForm!: FormGroup;
ngOnInit(): void {
    this.validateForm = this.fb.group({
      indicatorArr: [''],
    });
  }

子

<input  class="form-control"  [formControl]="formKey">
    
@Component({
  viewProviders: [{provide: ControlContainer, useExisting: FormGroupDirective}]
})
export class TimeModuleFourComponent implements OnInit {
  formKey!: FormControl;

  constructor(private fg: FormGroupDirective) {
  }

  ngOnInit(): void {
    this.formKey = (this.fg.form.get('indicatorArr') as FormControl);
  }

}

https://stackblitz.com/edit/angular-ssryuc?file=src%2Fapp%2Fapp.component.html

思考複雜結構的實現

父

<form nz-form [formGroup]="validateForm">
  <app-time-module-four formGroupName="add"></app-time-module-four>
</form>

this.validateForm = this.fb.group({
      indicatorArr: [''],
      add: this.fb.group({
        sex: ['',[Validators.required]]
      })
    });

子

  viewProviders: [{provide: ControlContainer, useExisting: FormGroupName}]
})
export class TimeModuleFourComponent implements OnInit {
  formGroupOne!: FormGroup;

  constructor(private fg: FormGroupName) {
  }

  ngOnInit(): void {
    this.formGroupOne = this.fg.control;
  }
}

子html

<form nz-form [nzLayout]="'inline'" [formGroup]="formGroupOne">
  <nz-form-item>
    <nz-form-label [nzSpan]="5">Fail</nz-form-label>
    <nz-form-control
      [nzSpan]="12"
      nzErrorTip="Should be combination of numbers & alphabets"
    >
      <input nz-input formControlName="sex" name="errorValid" />
    </nz-form-control>
  </nz-form-item>
</form>

上一個完整複雜的情況

父

export class RestrainComponent implements OnInit, OnDestroy {
      validateForm!: FormGroup;
      constructor(private fb: FormBuilder) {}
	  ngOnInit(): void {
              this.validateForm = this.fb.group({
                 restrainArr: this.fb.array([])
               });
              this.restrainArr.push(this.restrainListOne);
      }
  get restrainListOne(): FormGroup {
    return this.fb.group({
      name: ['', [Validators.required, Validators.maxLength(100)]],
      inhibitionSort: [''],
      status: [false],
      incidentInhibitionGroupBeanList: this.fb.array([]),
      // 加個展開收起字段
      unfold: [false]
    });
  }
    
  get restrainArr(): FormArray {
    return this.validateForm.get('restrainArr') as FormArray;
  }
}

html

  <form nz-form [formGroup]="validateForm">
    <div class="yl-content-box" formArrayName="restrainArr" *ngFor="let item of restrainArr.controls;let index=index;">
        <ty-restrain-list *ngIf="item.get('unfold').value" class="yl-content-particulars"
                          [formGroup]="item"></ty-restrain-list>
      </ng-container>
    </div>
  </form>

子

({
    ...
 viewProviders: [{provide: ControlContainer, useExisting: FormGroupDirective}]
})
export class RestrainListComponent implements OnInit {
  fbForm: FormGroup;

  constructor(private fg: FormGroupDirective) {
  }

  ngOnInit(): void {
    this.fbForm = this.fg.form;
  }

}

<form nz-form [formGroup]="fbForm">
  <nz-form-item class="yl-item">
    <nz-form-label nzRequired [nzSpan]="2" class="yl-item-label">策約名稱</nz-form-label>
    <nz-form-control [nzErrorTip]="templateError1" [nzSpan]="10">
      <input type="text" nz-input formControlName="name" placeholder="請輸入策略名稱" class="yl-item-input"/>
    </nz-form-control>
  </nz-form-item>
</form>

管道更新

https://stackoverflow.com/questions/43799656/manually-trigger-pipe-update
就是更新的時候傳入一個參數num=1
更改的時候 ++num 讓他遞增,更新管道