[英]Angular Attribute Directive form input
I'm struggling to get @Directive to work as intended. 我正在努力使@Directive正常工作。
I would like the Attr Directive to be able to access the model.password in the directive constructor and set variable varpassword with the current password. 我希望Attr指令能够访问指令构造函数中的model.password并使用当前密码设置变量varpassword。
I would also like to be able to retrieve all other inputs within the form field, how would i go about this? 我还希望能够检索表单字段中的所有其他输入,我将如何处理?
The documentation for a lot of this is not complete since being in Beta i know. 因为我知道处于Beta版,因此很多文档尚不完整。
I've been trying to figure this out for days with limited success. 数天来,我一直试图弄清楚这一点,但收效甚微。 I've removed the imports that i have tried to get it working on because i think I'm confused how to use them properly within the directive i have tried "NgModel, NgControl, ControlGroup, NgFormModel, FormBuilder...". 我删除了我试图使其正常工作的导入,因为我认为我对如何在我尝试过的指令“ NgModel,NgControl,ControlGroup,NgFormModel,FormBuilder ...”中正确使用它们感到困惑。
My test example code below. 我的测试示例代码如下。
login-form.html 登录-form.html
<form #testForm="ngForm">
Email Address:
<input type="text" name="username" size="50" required="required" [(ngModel)]="model.username" ngControl="username" #username="ngForm" />
Password:
<input type="password" name="password" size="20" required="required" [(ngModel)]="model.password" ngControl="password" #password="ngForm" testdir />
<input type="submit" value="Login" />
</form>
app.ts app.ts
import {Component} from 'angular2/core';
import {TestDirective} from '../../directives/test.directive';
@Component({
selector: 'test-app',
templateUrl: 'login-form.html',
directives: [TestDirective]
})
export class TestApp {}
test.directive.ts test.directive.ts
import {Directive} from 'angular2/core';
@Directive({
selector: '[testdir]',
host: {
'(keydown)': 'run()'
}
})
export class TestDirective {
varpassword: string;
constructor() {
this.varpassword = [******]
}
run() {
console.log( this.varpassword );
}
}
If anyone can point me in the right direction would be much appreciated. 如果有人能指出我正确的方向,将不胜感激。
You need to inject NgControl
into your directive: 您需要将NgControl
注入指令中:
@Directive({
(...)
})
export class TestDirective {
varpassword: string;
constructor(private ctrl:NgControl) {
}
ngOnInit() {
this.varpassword = this.ctrl.value;
}
}
Se this plunkr: https://plnkr.co/edit/3y4Qf7M4hb3zDIEJ773Q?p=preview . 设置此插件: https ://plnkr.co/edit/3y4Qf7M4hb3zDIEJ773Q ? p = preview。
Example of input directive with commas when focus out. 焦点对准时带有逗号的输入指令示例。
import {Directive, ElementRef} from '@angular/core';
@Directive({
selector: '[numberInput]',
host: {
'(focus)': '_onFocus()',
'(blur)': '_onBlur()',
'(keydown)': '_onKeypress($event)'
}
})
export class InputNumberDirective {
inputElement: ElementRef;
constructor(el: ElementRef) {
this.inputElement = el;
}
_onBlur() {
this.inputElement.nativeElement.value = this.inputElement.nativeElement.value.length > 0 ? parseInt(this.inputElement.nativeElement.value).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") : '';
}
_onKeypress(event: KeyboardEvent) {
if((event.which>= 58 && event.which<=126) || (event.keyCode >= 33 && event.which<= 47)){
event.preventDefault();
}
return event;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.