我目前正在研究自定义输入组件,这些组件已经过验证和相应的错误消息。我最近通过使用ngModel
和Output()
实现了ngModelChange
从输入组件到父组件的通信。
我现在的问题是我想在ngForm
中使用我的输入组件,该组件通常能够检测单个输入是否对form.invalid
无效。是否可以访问组件内部输入的验证状态,还是必须使用自定义变量将它们发送到外部?
input-component.html
<mat-form-field>
<mat-label>{{label}}</mat-label>
<input matInput name="name"
[(ngModel)]="input"
(ngModelChange)="inputChange.emit(input)"
#ref="ngModel"
minlength="6">
<mat-error *ngIf="(ref.invalid && (ref.dirty || ref.touched)) && ref.errors.minlength"> Must be at least 6 characters </mat-error>
</mat-form-field>
parent-component.html
<form #form="ngForm">
<!-- [(input)] is the ngModel-value emitted from the component -->
<custom-input [(input)]="name" label="Name"></custom-input>
<button (click)="save()" [disabled]="!form.valid">Submit</button>
</form>