Angular 角度2 |提交表单时显示小写值
有人能帮我找出为什么在我使用 从'@angular/forms'导入{FormGroup,FormControl,Validators} 这是我的密码 组件技术Angular 角度2 |提交表单时显示小写值,angular,angular-forms,Angular,Angular Forms,有人能帮我找出为什么在我使用 从'@angular/forms'导入{FormGroup,FormControl,Validators} 这是我的密码 组件技术 import { Component, Directive, OnInit, OnDestroy} from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import {UppercaseDirective}
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();
}
大写.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>
这是输出|您可以看到它在我的数据末尾显示小写值。
角度窗体控件侦听元素的“输入”事件。看起来您的指令也是这样做的,但是在指令更新值之后,ngControl直到下一个输入事件发生时才知道它。因此,在数据末尾,表单控件总是输入值。您可以从指令中分派“输入”事件,但我怀疑它是否会进入循环。您可以尝试侦听keydown/keyup事件或其他指令,然后发出“input”事件 当指令与表单控件一起使用时,我认为最好为您的指令扩展ControlValueAccessor。请参阅以下问题的一些答案,以获取一些好的示例:-
上面的代码正确吗?我看到你在模板中引用了名为ownerid的表单控件,但我没有看到表单组中声明的控件。很抱歉,我错误地粘贴了html,但代码很好。在我提交表单后,它只是在最后显示小写值。感谢@Krishnanni:-