angular - Angular Attribute Directive表单输入

我正在努力使@Directive正常工作。

我希望Attr指令能够访问指令构造函数中的model.password并使用当前密码设置变量varpassword。

我还希望能够检索表单字段内的所有其他输入，我将如何处理？

因为我知道处于Beta版，所以很多文档尚不完整。

数天来，我一直试图弄清楚这一点，但收效甚微。我删除了我试图使其正常工作的导入，因为我认为我在如何尝试使用“ NgModel，NgControl，ControlGroup，NgFormModel，FormBuilder ...”的指令中正确使用它们感到困惑。

我的测试示例代码如下。

login-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>

应用程序

import {Component} from 'angular2/core';

import {TestDirective} from '../../directives/test.directive';

@Component({
    selector: 'test-app',
    templateUrl: 'login-form.html',
    directives: [TestDirective]
})
export class TestApp {}

测试指令

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;
  }
}

设置此代码：https://plnkr.co/edit/3y4Qf7M4hb3zDIEJ773Q?p=preview。