在ng-2 material <md-input>字段中裁剪输入开头的空白,可以通过使用Angular的双向数据绑定和事件绑定来实现。
首先,在组件的HTML模板中,使用<md-input>标签创建输入框,并使用(ngModel)指令将输入框的值与组件中的一个变量进行双向绑定。例如:
<md-input [(ngModel)]="inputValue"></md-input>
然后,在组件的Typescript代码中,定义一个名为inputValue
的变量来存储输入框的值。同时,监听输入框的input
事件,并在事件处理函数中使用trim()
方法来裁剪输入开头的空白。最后,将裁剪后的值赋给inputValue
变量。示例代码如下:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
inputValue: string;
onInputChange(event: any) {
this.inputValue = event.target.value.trim();
}
}
在上述代码中,onInputChange()
方法是输入框的input
事件处理函数,通过event.target.value
获取输入框的值,并使用trim()
方法裁剪开头的空白。最后,将裁剪后的值赋给inputValue
变量。
这样,当用户在输入框中输入内容时,输入框的值会自动与inputValue
变量进行双向绑定,并且开头的空白会被裁剪掉。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云