导出为的多个指令

Question

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

我从 webstorm 得到以下提示：

有没有办法访问 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)">

但如果不是，则您正在使用 反应式表单，您可以在组件上指定 FormControls，方法是使用 FormBuilder/FormGroup/FormControl, 使用 [formGroup]="form"

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

Have created a Stackblitz as per your concern below. Hope this helps.

Answer 2

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

示例：

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

导出为的多个指令

multiple directives with export as

angular

angular-reactive-forms