将 angular2 表单指令应用于自定义输入表单元素 [英] Applying angular2 form directives to custom input form elements

问题描述

我想创建一个自定义的 InputCustom 组件并用它来创建模型驱动的表单.

我的自定义组件只是包装了一个输入字段，并使用 Bootstrap material design 来实现外观.

@Component({选择器:'输入自定义'，模板:`<div class="form-group label-floating is-empty"><label class="control-label" for="input">在此处输入</label><input class="form-control" id="input" type="text"><p class="help-block">一些帮助文本</p><span class="material-input"></span>

`})类 InputCustom{....}

在 Angular2 中，当您创建模型驱动的表单时

<输入类型=email"ngControl=email"></表单>

所有出现在表单元素上的Controls 都注册到一个ControlGroup 中.通过使用 formRef，您可以跟踪控制器内的字段值.

@Component({...})类表单控制器{formRef:控制组；构造函数(...){this.form.valueChanges.subscribe(data => console.log('changes', data));}}

现在，我希望人们像这样使用我的组件

<inputCustom type="email" ngControl="email"></表单>

问题 1:我需要编写自己的自定义 ngControl 指令吗?

Q2:如何将 ngControl 传播到由 包裹的内部 元素?

Q3: 我应该如何在周围的表单ControlGroup中注册我的Control?

解决方案

我看到了两种实现方式:

• 提供您的控件作为自定义组件的参数:

  @Component({选择器:'输入自定义'，模板:`<输入 [ngFormControl]="控制"/>`导出类 FormFieldComponent {(……)@输入()控制:控制；}

  这样您的输入将自动成为父组件中定义的表单的一部分.

• 实现符合 ngModel 的组件.实现时间有点长(您需要在自定义指令中实现和注册 ControlValueAccessor)，但这样您就可以直接使用 ngFormControl 和 ngModel 直接在您的自定义组件上.

  有关更多详细信息，请参阅此问题:Angular 2 自定义表单输入

我认为这篇文章可能会让您感兴趣:

• 实现 Angular2 表单——超越基础(第 2 部分)——http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

I want to create a custom InputCustom component and use it to create model-driven forms.

My custom component just wraps an input field and uses Bootstrap material design for look'n'feel.

@Component({
 selector:'inputCustom',
 template:`
    <div class="form-group label-floating is-empty">
        <label class="control-label" for="input">Type here</label>
        <input class="form-control" id="input" type="text">
        <p class="help-block">Some help text</p>
        <span class="material-input"></span>
    </div>
`})
class InputCustom{....}

In Angular2 when you create a model-driven form

<form [ngFormModel]="formRef">
    <input type ="email" ngControl="email">
</form>

all Controls present on form elements are registered into a ControlGroup. By using the formRef you can track field values inside controllers.

@Component({...})
class FormController{
    formRef: ControlGroup;
    constructor(...){
        this.form.valueChanges.subscribe(data => console.log('changes',  data));
    }
}

Now, I want people to use my component like this

<form [ngFormModel]="formRef">
    <inputCustom type ="email" ngControl="email">
</form>

Q1: Do I need write my own custom ngControl directive?

Q2: How to propagate ngControl to the inner <input> element wrapped by <inputCustom>?

Q3: How should I register my Control inside the surrounding forms ControlGroup?

解决方案

I see two ways to implement that:

• Provide your control as parameter of your custom component:

  @Component({
    selector: 'inputCustom',
    template: `
      <input [ngFormControl]="control"/>
    `
  export class FormFieldComponent {
    (...)
    @Input()
    control: Control;
  }
  

  This way your input will automatically takes part of the form defined in the parent component.

• Implement an ngModel-compliant component. It's a bit longer to implement (you need to implement and register a ControlValueAccessor within a custom directive) but this way you will be able to use directly the ngFormControl and ngModel directly on your custom component.

  <inputCustom type ="email" [ngFormControl]="email">
  

  See this question for more details: Angular 2 custom form input

I think that this article could interest you:

• Implementing Angular2 forms – Beyond basics (part 2) - http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

这篇关于将 angular2 表单指令应用于自定义输入表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！