以模板驱动形式访问 ng-template 中的表单

Question

<form #f="ngForm">
  <ng-container *ngTemplateOutlet="template"></ng-container>
  {{f.controls.formInput.value}} // gives error
  <ng-template #template>
    <div class="reusable-control">
      <input ngModel name="formInput">
    </div>
  </ng-template>
</form>

如您所见，我在 ng-container 之后访问 formInput 但出现错误。我做错了什么？

Answer 1

在 Angular v13 中它对我有用

<form #f="ngForm">
  <ng-container *ngTemplateOutlet="template"></ng-container>
  {{ f?.controls?.['formInput']?.value }}
  <ng-template #template>
    <div class="reusable-control">
      <input #formInput="ngModel" ngModel name="formInput">
    </div>
  </ng-template>
</form>

Answer 2

默认情况下它没有可显示的内容，它是空的。您没有将输入绑定到任何东西。当前的表单和值仅存在于模板中。如果你在 TS 中添加 [(ngModel)]="input" 和 input = 'test' 它会有一些东西。

Template: 
<form #f="ngForm">
  <ng-container *ngTemplateOutlet="template"></ng-container>

  <ng-container *ngIf="f.controls.formInput?.value">
    {{f.controls.formInput.value}}
  </ng-container>

  <ng-template #template>
    <div class="reusable-control">
      <input [(ngModel)]="input" name="formInput">
    </div>
  </ng-template>
</form>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  input = 'test';

  ngOnInit() {}
}

工作示例：https://stackblitz.com/edit/angular-ivy-q9usk3?file=src%2Fapp%2Fapp.component.html

以模板驱动形式访问 ng-template 中的表单

Access form inside ng-template in a template driven form

angular

angular-forms