[英]Prefix value to a field form value in angular reactive form
我正在使用 matPrefix 为电话号码添加前缀值。
<mat-form-field>
<mat-label>{{ 'MOBILE' | translate }}</mat-label>
<span matPrefix>05 </span>
<input type="tel" matInput placeholder="67000020" maxlength="8" dir="ltr" formControlName="MobileNo">
</mat-form-field>
this.form = this.fb.group({
MobileNo: ['', Validators.compose([Validators.required, Validators.pattern(/^\d{8}$/)])]
});
我希望前缀成为从表单发送的电话号码值的一部分。
现在我在保存数字时附加“05”并在编辑表单时删除前缀。
我想在多个 forms 中使用手机号码字段。我认为单独的组件似乎有点矫枉过正。
有没有更好的方法在表单字段中添加前缀值而不是在保存/编辑时附加/切片前缀值?
如果您在那里进行更多自定义操作,最好添加单独的组件。 但是如果你想尝试另一件事,你可以在 ng-template 下面试试
<ng-template #inputWithPrefix >
<mat-label>{{ 'MOBILE' | translate }}</mat-label>
<span matPrefix>05 </span>
<input type="tel" matInput placeholder="67000020" maxlength="8" dir="ltr" formControlName="MobileNo">
</ng-template>
然后你可以像下面这样使用它
<ng-template [ngTemplateOutlet]="inputWithPrefix"></ng-template>
您也可以在此处传递参数,如下所示
<ng-template #inputWithPrefix let-placeHolderVal="placeHolderVal">
{{ placeHolderVal }}
</ng-template>
按照此 URL 获取有关 ng-template 和 template-outlet 的更多详细信息https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.