Angular 反应形式 - 我想得到一个形式 属性 并检查它是否肮脏和原始

Question

Angular 反应形式 - 我想得到一个形式 属性 并检查它是否肮脏和原始。

技术：angular 7 和反应形式。

我的表格：

 <form class="flex flex-wrap col-12" [formGroup]="form" (ngSubmit)="submit()">

  <input type="text" placeholder="Company Name*" formControlName="companyName" class="col-12 field">

  <div formGroupName="address" class="col-12 mb1">

      <input class="col-12 field field-google" type="text" placeholder="Your Location*" id="Location" [options]='options' formControlName="addressLine1">

  </div>
</form>

我想检查 form.address.addressLine1 和 form.companyName 以查看它们在 html 中是否肮脏和原始，以便我可以显示错误消息。

当前尝试：

<p *ngIf="form.address.addressLine1.dirty">Error....</p>

Answer 1

使用 FormGroup 时，您可以使用 controls 属性 访问子项。这是一张地图。

<p *ngIf="form.controls['address'].controls['addressLine1'].dirty">Error....</p>

您有两个嵌套组。所以你必须使用控件两次。

https://angular.io/api/forms/FormGroup#controls

Answer 2

不是你问的，但你也可以使用 HTML CSS 类.

示例：

/* VALID */
form.ng-dirty {
    input {
        &.ng-valid.ng-dirty:not(.ng-pristine){
            p {
               display: none;
            }
        }
    }
}    
/* INVALID */
    form.ng-dirty {
        input {
            &.ng-invalid.ng-dirty:not(.ng-pristine){
                p {
                   display: block;
                }
            }
        }
    }

Answer 3

您可以使用 get() 访问控件，如下所示：

<p *ngIf="form.get('address').get('addressLine1').dirty">Error....</p>

同样，您可以像这样访问 companyName：
<p *ngIf="form.get('companyName').dirty">Error....</p>