Угловая реактивная форма - я хочу получить свойство формы и проверить, не является ли оно грязным и нетронутым

Question

Угловая реактивная форма - я хочу получить свойство формы и проверить, не является ли оно грязным и нетронутым.

Tech : угловые 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

Не то, что вы просили, но вы также можете использовать классы 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 2

Вы можете получить доступ к элементам управления, используя get(), как показано ниже:

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

Аналогично, вы можете получить доступ к companyName, например:
<p *ngIf="form.get('companyName').dirty">Error....</p>

Answer 3

При использовании FormGroup вы можете получить доступ к дочерним элементам, используя свойство controls.Это карта.

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

У вас есть две вложенные группы.Таким образом, вы должны использовать элементы управления дважды.

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