带export as的多个指令

Question

<form novalidate class="mt-2" #paramForm="ngForm" [formGroup]="form" (ngSubmit)="onSubmit(form)">

我从网络风暴中获得了以下提示：

是否可以访问由formGroupDirective导出的ngForm实例？

Answer 1

您只能使用其中之一：

#paramForm="ngForm"         // This pertains to Template Driven Form

or

[formGroup]="form"         // This pertains to Reactive Form

因此，如果您使用的是模板驱动的表单，您将在模板的[（ngModel）]上指定控件，请使用#paramForm="ngForm"

<form novalidate 
      class="mt-2" 
      #paramForm="ngForm" 
      (ngSubmit)="onSubmit(form)">

但是如果没有，并且您使用的是反应形式，则您可以通过使用FormBuilder / FormGroup / FormControl在组件上指定FormControl，请使用{{1} }

[formGroup]="form"

---

  

已根据您的关注事项创建了Stackblitz。希望这会有所帮助。

Answer 2

只要我只导入ReactiveFormsModule而不同时导入那个和FormsModule，我就同时使用ngForm指令和formGroup指令，而在Angular 7中没有出现该错误。那可能是你的问题。

示例：

<form [formGroup]="inviteForm" (ngSubmit)="onSubmit()" #formDir="ngForm">
  <span *ngIf="formDir.submitted && !inviteForm.get('firstName').valid; else otherErrorMessage">First name invalid</span>
</form>