Реактивные формы: проверка шаблона не работает в дочернем компоненте - PullRequest
0 голосов
/ 03 июня 2019

ДЕМО-КОД https://stackblitz.com/edit/angular-yaipfv

В приведенном выше примере у меня есть реактивная форма с вложенной формой groups.address-form дочерний компонент используется для вложенной группы форм. Проверка выполняется в родительском компоненте. Кажется, все работает, кроме проверки шаблона. Проверка для требуемого работает нормально, но проверка шаблона не работает .

Я использовал validators.compose для объединения необходимых проверок и шаблонов. Есть ли что-то, что я здесь делаю неправильно?

Формирование родительского компонента

 this.form = this.fb.group ({
  phone: ['123-456-1234'],
  fax: [null],
  email: [null],
  website: [null],
  editUserForm_Address : this.fb.group ({
    address1: 
   [null,Validators.compose([Validators.pattern('[0-9] 
   {16}'), Validators.required])],
    address2: [null],
    city: ['Dummy City', Validators.required],
    state: ['Dummy State', Validators.required],
    zipcode: ['11111', Validators.required],
    country: ['USA', Validators.required]
   })
   });

Родительский HTML

<form [formGroup]="form">
  <address-form [formGroup]="form.get('editUserForm_Address')"></address-form>
  <button type="submit">Submit</button>
</form>

<pre>{{ form.value | json  }}

дочерний компонент HTML

<div [formGroup]="formGroup">   
  <div class = "row">
    <div
      class="form-group col-12"
      [ngClass]="{'error': (formGroup.get('address1').errors)}">
      <label for="street" >Address 1*</label>
      <input
        placeholder="Address 1"
        class="form-control"
        formControlName="address1" />
      <div *ngIf="(formGroup.get('address1').errors)" class="error-msg">
        <div [hidden]="!formGroup.get('address1').errors.required"
class = "input_feedback">Address 1 is required.</div>
 <div [hidden]="!formGroup.get('address1').errors.pattern"
class = "input_feedback">Address should follow the pattern</div>
      </div>

    </div>
  </div>
</div>

1 Ответ

1 голос
/ 03 июня 2019

Что касается меня, вы подтверждаете шаблон, введите: 1234567890123456. Какую информацию вы хотите проверить?) Также вы можете заменить его на

address1: ['',Validators.pattern('^\\d{16}$')]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...