twitter bootstrap - formularios - Aplicación de directivas de forma angular2 a elementos de formulario de entrada personalizados

formularios reactivos angular 6

Question

Quiero crear un componente InputCustom personalizado y usarlo para crear formularios basados ​​en modelos.

Mi componente personalizado simplemente envuelve un campo de entrada y usa el Bootstrap material design para 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{....}

En Angular2 cuando crea una forma impulsada por modelo

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

todos los Controls presentes en los elementos del formulario se registran en un grupo de ControlGroup . Mediante el uso de formRef puede rastrear los valores de campo dentro de los controladores.

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

Ahora, quiero que la gente use mi componente como este

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

P1: ¿Necesito escribir mi propia directiva ngControl personalizada?

P2: ¿Cómo propagar ngControl al elemento interno <input> envuelto por <inputCustom> ?

P3: ¿Cómo debo registrar mi Control dentro de los formularios ControlGroup ?

Answer 1

Supongo que un ValueAccessor personalizado debería hacer.

Ver
- https://plnkr.co/edit/Bz7wLC5qq7s6Fph1UwpC?p=preview (acceso de valor proporcionado por DI)

 providers: [provide(NG_VALUE_ACCESSOR, {useClass: UIDropdownComp, multi: true})]
})
export class UIDropdownComp implements ControlValueAccessor {

- http://plnkr.co/edit/slVMz6Kgv6KlnUNMDe3o?p=preview (ngControl inyectado en el componente y valor de acceso asignado "manualmente")

export class Address implements ControlValueAccessor{
addressForm: ControlGroup;
value:any;
addressForm: ControlGroup;
constructor(@Optional() ngControl: NgControl, elementRef: ElementRef,fb: FormBuilder) {
ngControl.valueAccessor = this;

Ver también https://github.com/angular/angular/issues/2543

Answer 2

El material angular 2 que implementa un elemento de formulario de entrada personalizado es una gran fuente de información para ver cómo implementar ValueAccessor.

Así que simplemente explore el código fuente aquí y eche un vistazo al componente de entrada: https://github.com/angular/material2

Answer 3

Veo dos formas de implementar eso:

• Proporcione su control como parámetro de su componente personalizado:

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

  De esta forma, su entrada formará automáticamente parte del formulario definido en el componente principal.

• Implemente un componente que cumpla con ngModel . Es un poco más largo de implementar (necesita implementar y registrar un ControlValueAccessor dentro de una directiva personalizada) pero de esta manera podrá usar directamente ngFormControl y ngModel directamente en su componente personalizado.

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

  Consulte esta pregunta para obtener más información: entrada de formulario personalizado angular 2

Creo que este artículo podría interesarte:

• Implementación de formularios Angular2 - Más allá de los conceptos básicos (parte 2) - http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/