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

在此示例中，我们将看到如何基于使用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());
  
    }
}

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 { }

输出：