ДЕМО-КОД
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>