Question

我很难让@Directive按预期工作。

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

我还希望能够检索表单字段中的所有其他输入，我将如何解决此问题？

由于我知道Beta版，因此很多文档都没有完整。

我一直在努力解决这个问题，但成功有限。我已经删除了我试图让它继续运行的导入，因为我觉得我很困惑如何在指令中正确使用它们我尝试过“NgModel，NgControl，ControlGroup，NgFormModel，FormBuilder ......”。

我的测试示例代码如下。

登录-form.html

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer
{ 
  ...
}

app.ts

@EnableWebSocketMessageBroker

test.directive.ts

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

如果有人能指出我正确的方向，我将不胜感激。

Answer 1

您需要将NgControl注入您的指令：

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

  constructor(private ctrl:NgControl) {
  }

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

这个笨蛋：https://plnkr.co/edit/3y4Qf7M4hb3zDIEJ773Q?p=preview。

Answer 2

焦点输出时带逗号的输入指令示例。

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

角度属性指令表单输入

2 个答案: