我正在使用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',并在编辑表单时删除了前缀。
我想以多种形式使用手机号码字段。我认为单独使用它似乎太过分了。
在保存/编辑时,是否有更好的方法在表单字段中添加前缀值而不是附加/切片前缀值?
答案 0 :(得分:0)
如果您要在此处进行更多自定义操作,最好添加单独的组件。但是,如果您想尝试其他事情,可以在下面的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/
的更多详细信息