在父表单的加载上验证子隐藏表单

Question

当隐藏子组件时，我无法验证它。

我有一个可以切换show或hidden的通用子组件表单。 在父表单上，我使用了2次，因为它是一个地址表单，因此用户可以添加送货地址和帐单邮寄地址。

这两个表单都有自己的save btn来渲染视图的更改，但我想保存它，或者我希望如果表单有效则可以点击save btn 。 所以我在HTML文件parentForm.get('addressForm').valid;上做了这个parentForm.get('addressForm').valid; 但是在加载时，我得到错误，因为我认为地址表单尚未加载或显示在视图中我也认为angular删除了实际的DOM。

<form [formGroup]="parentForm">

<div class="m-3 w-75 m-auto ">

          <div class="d-flex justify-content-between">
            <h4>Shipping Address</h4>
          <div>
           <button
              *ngIf="isEditingShippingAddress"
              class="btn btn-primary-invert mr-2"
              type="button"
              (click)="showHideForms(false, 'shippingAddress')"
           >
              Cancel
           </button>
           <button
             *ngIf="!isEditingShippingAddress"
              class="btn btn-primary-invert ml-2"
              type="button"
              (click)="showHideForms(false, 'shippingAddress')"
           >
              Edit
           </button>
           <button
              [disabled]="parentForm.get('addressForm').valid"
              *ngIf="isEditingShippingAddress"
              class="btn btn-primary-invert ml-2"
              type="submit"
            (click)="showHideForms(true, 'shippingAddress')"
           >
         Save
      </button>
   </div>

   // heres the child form !!!!!!!!!!!!!!!!
   <app-form-address
       *ngIf="isEditingShippingAddress; else shippingAddressTemplate"
            [parentForm]="form"
   >
   </app-form-address>

</form>

检查出现错误的save btn（最后一个按钮标记）。 这是他们的解决方案吗？ 还是黑客？ 我也试过安全导航还没有运气。 请帮忙。 谢谢

编辑：对于那些在这里询问错误消息的人来说。

Cannot read property 'valid' of null

如果您进行安全导航，则会出现另一个错误

[disabled]="form?.get('bill_address_attributes')?.invalid"

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'disabled: null'. Current value: 'disabled: true'.

Answer 1

请提供您声明为“parentForm”的.ts文件。

如果您收到错误，因为无法读取未定义的地址或未定义的有效，请尝试此==> [disabled] =“parentForm？.get（'addressForm'）?. valid”

Answer 2

如果控件被禁用（*）（Angular不检查禁用的控件），则始终验证控件。 你可以禁用孩子。

在stackblitz你有两个aproach，你真的可以删除验证器或其他选项：

1. 禁用并使用“display：none”隐藏控件（不是* ngIf）
2. 使用（更改）到“禁用”启用控件并使用* ngIf

如果你得到第一种方法，使用禁用和隐藏。 创建一个指令，您的表单就像

<input type="checkbox" [(ngModel)]="hideSurname">Hide surname
<form *ngIf="myForm" [formGroup]="myForm">
  <input formControlName="name">
  <input formControlName="surname" 
         [disableControl]="hideSurname" 
         [style.display]="hideSurname?'none':display" >
  </form>

如果你得到第二种方法，你的表格就像

<input type="checkbox" [ngModel]="hideSurname2" (ngModelChange)="toogle($event)">Hide surname
<form *ngIf="myForm" [formGroup]="myForm">
  <input formControlName="name">
  <input *ngIf="!hideSurname2" formControlName="surname">
  </form>

你的功能必须像

toogle(value:boolean)
  {
    this.hideSurname2=value;
    if (this.hideSurname2)
      this.myForm2.get('surname').disable();
    else
      this.myForm2.get('surname').enable();
  }

（*）使用Angular 7 -I认为在Angular 4中不能以相同的方式工作