📜  如何基于使用Angular 8的输入使输入显示为句子大小写?

📅  最后修改于: 2021-05-13 18:38:49             🧑  作者: Mango

在此示例中,我们将看到如何基于使用angular8进行键入使输入显示为句子大小写。

方法:

  • 首先,我们需要为HTML文件中的输入类型编写代码。
  • 在使用HTML将输入类型写为文本之后,使用双向绑定,即使用ngModel,我们可以绑定输入字段的值。
  • 现在,为了使输入字段句子大小写,我们可以根据需要使用ngModelChange事件来操纵值。
  • 确保从“ @ angular / forms”导入“ FormsModule”。
  • 导入模块后,我们需要在ts文件中实现该函数,在该文件中,我们可以根据需求(例如句子大小写)使用正则表达式修改输入值,并可以在输入字段中显示。
  • 完成上述步骤后,启动或服务项目以运行。

代码实现:

app.component.ts:

Javascript
import { Component } from '@angular/core';
  
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    inputvalue = ''
  
    changeToSentenceCase(event) {
  
        this.inputvalue = event.replace(/\b\w/g, 
            event => event.toLocaleUpperCase());
  
    }
}


HTML

Type in textbox to make as sentence case.

  


Javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
  
@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }


app.component.html:

的HTML

Type in textbox to make as sentence case.

  

app.module.ts:

Java脚本

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
  
@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

输出: