角 2 |提交表单时显示小写值答案

【问题标题】：Angular 2 | Showing lowercase value when form is submitted角 2 |提交表单时显示小写值
【发布时间】：2017-12-21 10:04:49
【问题描述】：

有人可以帮我找出为什么在我使用提交表单后我的值最终返回小写

从 '@angular/forms' 导入 { FormGroup, FormControl, Validators }；

这是我的代码

组件.ts

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

import {UppercaseDirective} from '../uppercase.directive';

@Component({  selector: 'app-storageentry',
  templateUrl: './storageentry.component.html',
  styleUrls: ['./storageentry.component.css']
})

export class StorageentryComponent implements OnInit, OnDestroy {
  storageForm: FormGroup;

   private initForm(){
    let storageDescription: string;

    //pass the formControl specified by '' to use in HTML
    this.storageForm = new FormGroup({
      description: new FormControl(storageDescription, Validators.required)
    })
  }
}

ngOnInit() {
    this.initForm();
}

onSubmit(){
  this.storageEntryService.addStorage(this.storageForm.value);
   this.storageForm.reset();
}

大写.directives.ts

import { Directive, HostListener, Renderer, ElementRef } from '@angular/core';
@Directive({
    selector: '[uppercase]'
})
 export class UppercaseDirective{

constructor(
    private renderer: Renderer,
    private el: ElementRef
){}

@HostListener('input') input() {
this.el.nativeElement.value=this.el.nativeElement.value.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" uppercase>
  </div>
</div>

这是输出 |如您所见，它在我的数据末尾显示小写值。

【问题讨论】：

你上面的代码对吗？我看到您在模板中引用了一个名为 ownerid 的表单控件，但我没有在表单组中看到该控件。
对不起，我错误地粘贴了 html，但代码很好，它只是在我提交表单后最后显示小写值。

标签： angular angular-forms

【解决方案1】：

角度表单控件监听元素的“输入”事件。似乎您的指令执行相同的操作，但是在指令更新值之后，ngControl 直到下一个输入事件发生才知道它。所以在数据的最后，表单控件总是输入值。您可以从指令中分派一个“输入”事件，但我怀疑它会进入一个循环。您可以尝试监听 keydown/keyup 事件或其他指令，然后发出“输入”事件。

当指令与表单控件一起使用时，我认为最好为您的指令扩展 ControlValueAccessor。请参阅以下问题的一些答案以获取一些很好的示例：-

How to convert input value to uppercase in angular 2 (value passing to ngControl)

【讨论】：

感谢@Krishnanunni :-)