Question

隐藏子组件时，我难以验证。

我有一个通用的子组件形式，可以切换为show或hidden。在上级表格上，我已经使用了两次，因为它是地址表格，因此用户可以添加送货地址和帐单地址。

这两种形式都有自己的save btn来呈现对视图的更改，但是我想保存它，或者如果表单有效，我希望save btn是可单击的。因此我在HTML文件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中，您有两个方法，实际上您也可以删除验证器或其他选项：

禁用并使用“ display：none”（而不是* ngIf）隐藏控件
使用（更改）为“已禁用”启用控件并使用* 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必须像

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

（*）使用Angular 7-我认为在Angular 4中工作方式不同

在加载父表单时验证子隐藏表单

2 个答案: