Angular 2 ContentChild Apply Html属性 [英] Angular 2 ContentChild Apply Html Attributes

问题描述

我有一个自定义组件，该组件将引导表单组应用于我的表单字段.在我的组件中，我具有以下属性:

I have a custom component that applies bootstrap form group to my form fields. In my component I have below properties:

import { Component, Input, ContentChild } from '@angular/core';
import { NgControl } from '@angular/common';

@Component({
    selector: 'form-field',
    template: `
            <div class="form-group" [ngClass]="{'has-error':(state && !state.valid && state.touched)}">
                <label *ngIf="label" [attr.for]="state.name" class="col-sm-3 control-label">{{label}}</label>
                <div class="col-sm-9">
                    <ng-content></ng-content>
                    <div *ngIf="state && !state.valid && state.errors && state.touched" class="help-block text-danger">
                        <span *ngIf="state.errors.required">{{label? label:'This field'}} is required</span>
                        <span *ngIf="state.errors.min">{{label? label:'Value'}} too small</span>
                    </div>
                </div>
            </div>
            `
})
export class FormFieldComponent{
    @Input()
    label: string;

    @ContentChild(NgControl) state;
}

在我的模板中，我像这样使用组件:

And in my template I use my component like this:

<form [ngFormModel]="form" (ngSubmit)="onSubmit()" novalidate>
    <form-field label="First Name">
     <input ngControl="firstName" type="text">
    </form-field>
</form>

我想知道是否可以通过我的组件为控件动态设置占位符文本?

I was wondering is there any way to dynamically set the placeholder text for the control through my component?

我希望将标签设置为输入字段的占位符，即

I want the label to be set as placeholder of the input field i.e.

推荐答案

此伪指令应用于具有ngControl或[ngControl]="..."属性的所有输入元素.它在应用元素的元素上设置placeholder属性.

This directive is applied to all input elements that have a ngControl or [ngControl]="..." attribute. It sets the placeholder attribute on the element where it is applied.

使用

使其在全球范围内可用

It is made globally available using

bootstrap(App, [
  provide(PLATFORM_DIRECTIVES, {useValue: [InputLabel], multi: true})
])

@Directive({
  selector: ['[ngControl]']
})
export class InputLabel {
  @Input()
  @HostBinding('attr.placeholder') 
  label;

  constructor() {
    console.log('InputLabel');
  }
}

在FormField组件中，将查询此伪指令，并将来自输入的标签传递到该伪指令(在ngOnChanges或ngAfterContentChecked中-基本上是第一次出现label和state可用的地方.

In the FormField component this directive is queried for and the label from the input is passed to the directive (in ngOnChanges or ngAfterContentChecked - basically the first occurence where label and state are available.

@Component({
  selector: 'form-field',
  providers: [],
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `,
  directives: []
})
export class FormField {
  @Input() label: string;
  @ContentChild(InputLabel) state;

  ngOnChanges() {
    if(this.label && this.state) {
      this.state.label = this.label;
    }
  }

  ngAfterContentInit() {
    if(this.label && this.state) {
      this.state.label = this.label;
    }
  }
}

这只是为了演示其用法:

This is just to demonstrate how its used:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
<form>      
  <form-field label="First Name">
    <input ngControl="firstName" type="text">
  </form-field>      
</form>
    </div>
  `,
  directives: [FormField, FORM_DIRECTIVES]
})
export class App {

  constructor(fb:FormBuilder) {
    this.name = 'Angular2 (Release Candidate!)'
    this.form = fb.group({firstName: [""]});
  }
}

柱塞示例

之所以选择这种方法，是因为我无法通过其他查询(NgControl，...)来获得对输入元素的引用.

I choose this approach because I wasn't able to query by something else (NgControl, ...) and get a reference to the input element.

不必以这种方式提供指令.也可以通过将其添加到使用它的@Component()装饰器上的directives: [InputLabel]中，像其他任何自定义指令一样提供该

It's not necessary to provide the directive this way. It can also be provided like any other custom directive by adding it to directives: [InputLabel] on the @Component() decorator where it is used.

这篇关于Angular 2 ContentChild Apply Html属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！