表单内部组件Angular 2

Question

下面是我的父表单：

<form [ngFormModel]="formModel">
    <ui-form-control *ngFor="#key of controlsKeys"
                     [control]="formModel.controls[key]"
                     [name]="key">
    </ui-form-control>
</form>

下面是我的组件：

@Component({
    selector: 'ui-form-control'
})
@View({
    template: `
    <label>{{name}}: </label>
    <input [ngFormControl]="control" [placeholder]="name">
    `,
    directives: [FORM_DIRECTIVES]
})
export class UiFormControl{
    @Input() control: UiControl;
    @Input() name: string;

    constructor(){
    }
}

我可以在ui-form-component中看到Control值，但当我更改它时，formModel ComponentGroup不会更新。所以看起来双向绑定在这里是行不通的。

实际上，如果我删除我的<ui-form-control>并放置简单的<input>标记，它就会工作，formModel也会按预期进行更新。

Answer 1

我认为你应该在你的子组件中使用双向绑定，同时使用@Input和@Output。后者被通知父组件该子组件内的控件发生了变化。我想的是这样的事情：

@Component({
  selector: 'ui-form-control'
  template: `
    <label>{{name}}: </label>
    <input [ngFormControl]="control" (change)="inputChanged()" [placeholder]="name">
  `,
  directives: [FORM_DIRECTIVES]
})
export class UiFormControl{
  @Input() control: UiControl;
  @Output() controlChange: EventEmitter;
  @Input() name: string;

  constructor(){
    this.controlChange = new EventEmitter();
  }

  inputChanged() {
    this.controlChange.emit(this.control);
  }
}

我通过利用ng-content在表单字段中使用了一种中间方法。

@Component({
  selector: 'field',
  template: `
    <div class="form-group form-group-sm" [ngClass]="{'has-error':control && !control.valid}">
      <label for="for"
         class="col-sm-3 control-label">{{label}}</label>

      <div #content class="col-sm-8">
        <ng-content ></ng-content>
        <span *ngIf="control && !control.valid" class="help-block text-danger">
          <span *ngIf="control?.errors?.required">The field is required</span>
        </span>
      </div>
    </div>
  `
})
export class FormFieldComponent {
  @Input()
  label: string;

  @Input()
  state: Control;
}

以及它在父组件中的使用：

<form [ngFormModel]="companyForm">
  <field label="Name" [state]="companyForm.controls.name">
    <input [ngFormControl]="companyForm.controls.name" 
           [(ngModel)]="company.name"/> {{name.valid}}
  </field>
</form>

如此一来，输入、选择、文本元素仍然在父组件中管理，但字段组件处理字段格式(例如Bootstrap3的结构)，并利用控件来显示错误。这样你就不再需要字段组件的双向绑定，后者更通用;-)

希望对你有帮助，蒂埃里

Answer 2

我知道你问这个问题已经有一段时间了，但是对于有同样问题的人来说，也许AJT82对我的问题的回答可以帮助你：Problem with mat-select when submitting form in angular

Answer 3

您期望的是哪两种绑定方式？

通过将属性设置为(单向)绑定和事件，您可以获得双向绑定。实际上还有更多，但快捷方式很简单，如下所示：

<input [(ng-model)]="myField" >

你可以在Victor Savkins blog上阅读更多。