我正在努力让@Directive按预期工作。
我希望Attr Directive能够访问指令构造函数中的model.password并使用当前密码设置变量varpassword。
我还希望能够检索表单字段中的所有其他输入,我将如何进行此操作?
很多这方面的文档都不完整,因为我知道Beta。
我一直在试图解决这个问题,并且成功有限。我已经删除了我试图让它继续工作的导入,因为我觉得我很困惑如何在指令中正确使用它们我试过“NgModel,NgControl,ControlGroup,NgFormModel,FormBuilder ......”。
我的测试示例代码如下。
登录-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
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
import {Directive} from 'angular2/core';
@Directive({
selector: '[testdir]',
host: {
'(keydown)': 'run()'
}
})
export class TestDirective {
varpassword: string;
constructor() {
this.varpassword = [******]
}
run() {
console.log( this.varpassword );
}
}
如果有人能指出我正确的方向将非常感激。
你需要将NgControl
注入你的指令:
@Directive({
(...)
})
export class TestDirective {
varpassword: string;
constructor(private ctrl:NgControl) {
}
ngOnInit() {
this.varpassword = this.ctrl.value;
}
}
硒这个羽毛球:qazxsw poi。
焦点输出时带逗号的输入指令示例。
https://plnkr.co/edit/3y4Qf7M4hb3zDIEJ773Q?p=preview