One of the challenges I am facing is how to handle a child component with 2 input text-fields simultaneously. Both of these fields require ngModel validation in the parent component. Additionally, both inputs are mandatory and need to be checked using !form.valid. Is it possible to use an object for [ngModel]="name" to achieve this?
If you would like more information on the *.ts files, please refer to this StackBlitz demo
child:
<mat-form-field>
<input matInput type="password"
name="{{inputNamePass}}"
[(ngModel)]="modelPass"
(ngModelChange)="modelChange.next($event)"
required pattern=".....">
</mat-form-field>
<br><br>
<mat-form-field>
<input matInput type="password"
name="{{inputNamePassConfirm}}"
[(ngModel)]="modelPassConfirm"
(ngModelChange)="modelChange.next($event)"
required>
</mat-form-field>
parent:
<form #f="ngForm">
<app-input [name]="'name for password'"
[name]="'name for password confirm'"
[ngModel]="name"
ngDefaultControl>
</app-input>
</form>