使用ngModel

时间:2019-04-11 14:55:08

标签: html angular typescript

我目前正在研究自定义输入组件,这些组件已经过验证和相应的错误消息。我最近通过使用ngModelOutput()实现了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> 

0 个答案:

没有答案