角反应形式-我想获得一个形式属性,并检查其是否脏和原始

时间:2019-01-25 14:59:47

标签: angular angular6 angular-reactive-forms angular7 angular-forms

角反应形式-我想获取一个表单属性,并检查其是否脏和原始。

技术:角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>

3 个答案:

答案 0 :(得分:1)

使用FormGroup时,可以使用controls属性访问子级。这是一张地图。

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

您有两个嵌套的组。因此,您必须两次使用控件。

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

答案 1 :(得分:1)

不是您要的内容,但是您也可以使用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;
                }
            }
        }
    }

答案 2 :(得分:1)

您可以使用get()来访问控件,如下所示:

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

类似地,您可以使用如下方式访问companyName: <p *ngIf="form.get('companyName').dirty">Error....</p>