1

我有一个可重用的可编辑表单组件。该组件包含一个<form>元素。在该表单中，插入了由另一个组件提供的模板，该组件包含一个<input>元素。该<input>元素不会成为NgForm可重用组件中的一部分。编辑时<input>，它的脏/原始和有效/无效属性会更新，但表单不会。

这是简化的可重用组件：

@Component({
  selector: 'editable-form',
  template: `
<ng-template #dialogTemplate>
  <div>
    <h3>Edit {{title}}</h3><hr/>

    <h4>Current {{title}}</h4>
    <ng-container *ngTemplateOutlet="displayTemplate"></ng-container>

    <form #dialogForm="ngForm" novalidate (ngSumbit)="submit()">
      <h4>New {{title}}</h4>
      <ng-container *ngTemplateOutlet="editTemplate"></ng-container>

      <div>
        Form valid: {{dialogForm.form.valid}}<br/>
        Form dirty: {{dialogForm.form.dirty}}<br/>
      </div>

      <div>
        <button type="submit" [disabled]="!dialogForm.form.valid || !dialogForm.form.dirty">Submit</button>
        <button type="button" (click)="close()">Close</button>
      </div>
    </form>
  </div>
</ng-template>

<h4>{{title}}</h4>
<ng-container *ngTemplateOutlet="displayTemplate"></ng-container>

<ng-container *ngIf="showForm">
  <ng-container *ngTemplateOutlet="dialogTemplate"></ng-container>
</ng-container>`
})
export class EditableFormComponent {
  @Input() title: string;
  @ContentChild('displayTemplate', { static: true }) displayTemplate: TemplateRef<ElementRef>;
  @ContentChild('editTemplate', { static: true }) editTemplate: TemplateRef<ElementRef>;
  @Output() onSubmit = new EventEmitter();
  showForm: boolean = true;

  open() { this.showForm = true; }
  close() { this.showForm = false; }
  submit() { this.onSubmit.next(); }
}

这是一个使用它的组件：

@Component({
  selector: 'edit-name',
  template: `
<editable-form title="Name" (onSubmit)="save()">
  <ng-template #displayTemplate>
    <div *ngIf="name">{{name}}</div>
    <div *ngIf="!name">Not Set</div>
  </ng-template>

  <ng-template #editTemplate>
    <input [(ngModel)]="newName" #newNameInput
           name="newName"
           id="newName"
           required
           ngbAutofocus>

    <div>
      Control valid: {{newNameInput.className.includes('ng-valid')}}<br/>
      Control dirty: {{newNameInput.className.includes('ng-dirty')}}<br/>
    </div>
  </ng-template>
</editable-form>`
})
export class EditNameComponent {
  name: string;
  newName: string;

  save() { this.name = this.newName; }
}

我已经尝试通过提供ControlContainerviewProviders，通过指令提供 ControlContainer ，包括通过共享服务在模板中的表单组件，通过ContentChild与通过Input它们而不是在<editable-form>元素内部提供模板。

ng-template只有当表单元素包含在<form>via 组件下时，这些技术似乎都不适用于.

我难住了。我只需要传递给可重用组件的输入成为可重用组件中<form>声明的一部分。

4

0 回答 0