Angular <input>, предоставляемый через ng-template & ngTemplateOutlet, не является частью окружающего NgForm

У меня есть многоразовый компонент для редактируемой формы. Этот компонент содержит<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; }
}

Я попытался предоставить ControlContainer черезviewProviders, предоставляя ControlContainer через директиву, включая компоненты формы в шаблонах через общую службу, предоставляя шаблоны черезContentChild по сравнению с Input с ними не внутри <editable-form> элемент..

Ни один из этих методов не работает с ng-template, только если элементы формы включены в <form> через компонент.

Я в тупике. Мне просто нужны входные данные, которые я передаю компоненту многократного использования, чтобы они были частью<form> объявлен в повторно используемом компоненте.

Источник

0 ответов

Другие вопросы по тегам