Question

如何在提交表单时将值设置为大写？

我尝试使用.toUpperCase（）方法，但它不起作用。是否在提交表单时对其自动大写值进行了一些表单验证？

这是我的以下代码。

component.html

<div class="form-group input-holder">
    <label class="col-lg-2">Description</label>
    <div class="col-lg-4">
        <small [ngClass]="{'prompterror': storageForm.controls.description.valid || storageForm.controls.description.pristine}">
         *required
        </small>
        <input type="text" class="input-field" placeholder="Description" formControlName="description" ngModel>
    </div>
</div>

component.ts文件

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

import { Storage } from '../shared/storage.model';
import { StorageEntryService } from '../storage.service';

@Component({
    selector: 'app-storageentry',
    templateUrl: './storageentry.component.html',
    styleUrls: ['./storageentry.component.css'],
})
export class StorageentryComponent implements OnInit, OnDestroy {

    storageForm: FormGroup;

    constructor(private storageEntryService: StorageEntryService) {}

    private initForm() {
        let storageDescription = '';

        if (this.editButton) {
            const storage = this.storageEntryService.getStorage(this.storageId)
            storageDescription = storage.description;
        }

        this.storageForm = new FormGroup({
            'description': new FormControl(storageDescription, Validators.required)
        })
    }
}

提交功能

onSubmit(){
// Switching for Add Button and Edit Button
if (this.editButton) {
  this.storageEntryService.updateStorage(this.storageIdIndex, this.storageForm.value);
  this.editButton = false;
}else{
  this.storageEntryService.addStorage(this.storageForm.value);
}
this.storageForm.reset();

}

Answer 1

创建一个指令来处理这种情况

  <input type="text" change />

指令必须处理以下keyup事件

@HostListener('keyup') onKeyUp() {
    this.el.nativeElement.value=this.el.nativeElement.value.toUpperCase();
     console.log(this.el.nativeElement.value )

    }

LIVE DEMO

角2 |提交表单时如何设置大写

1 个答案: