Angular2属性指令表格输入

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

我还希望能够检索表单域中的所有其他输入，我将如何去做这件事？

很多这样的文档并不完整，因为我在Beta版本中知道。

我一直在试图找出有限的成功天。我已经删除了我试图让它工作的导入，因为我觉得我很困惑如何在指令中正确使用它们，我试过“NgModel，NgControl，ControlGroup，NgFormModel，FormBuilder ...”。

我的测试示例代码如下。

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

}

如果任何人都可以在正确的方向指向我会更赞赏。

来源

2016-04-21 J J B

你需要注入NgControl到你的指令：

@Directive({ 
    (...) 
}) 
export class TestDirective { 
    varpassword: string; 

    constructor(private ctrl:NgControl) { 
    } 

    ngOnInit() { 
    this.varpassword = this.ctrl.value; 
    } 
}

SE这plunkr：https://plnkr.co/edit/3y4Qf7M4hb3zDIEJ773Q?p=preview。

来源

2016-04-21 11:53:15

谢谢你完美。我试图在我的测试中设置构造函数中的变量，难怪为什么它不起作用。我现在已经工作如何使用控制台（this.form.controls）时也访问ngForm;我可以看到它返回的对象，你知道一种方法来检查输入类型，例如密码，输入等吗？再次感谢。 –

您需要利用组件的生命周期挂钩。在构造函数中为时尚早...要访问输入类型，需要注入'ElementRef'。你可以通过'nativeElement.type'来获得这个提示。我更新了plunkr ;-) –

好吧，我看到这是为attr指令输入，但表单对象内的所有其他输入是什么。我想要实现的是观察表单中的所有输入以更改为ngModel，表单可以包含任何数量的输入，因此不仅仅是用户名和密码。例如名称，地址1，地址2，邮编，电子邮件，用户名，密码，验证密码。我将循环遍历ngForm.controls对象和任何不是输入密码的输入，我会将其推入指令中的新数组中，并在自定义密码验证程序中使用它们的值。感谢您的帮助:) –

注意输入指令的例子，带逗号。

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

来源

2017-04-06 08:47:39

'keyCode'已弃用，不应使用。 https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode – callback

你是对的，我更新了答案 –

谢谢！干杯。 – callback

Angular2属性指令表格输入

回答

相关问题