Нет провайдера NgFrom - PullRequest
Новая
       10

Нет провайдера NgFrom

0 голосов
/ 15 января 2019

Я использую ngModelGroup для группировки некоторого поля в форме, и эта ngModelGroup содержится в дочернем компоненте. Этот подход работает нормально

child.component.html 

<div [ngModelGroup]="formGroupName" #fieldset="ngModelGroup">
    <input name="first" [ngModel]="user.first" minlength="2">
    <input name="last" [ngModel]="user.last" required>
    <button [disabled]="fieldset.pristine||fieldset.invalid">
    Save
    </button> 
</div>

Child.component.ts 

import { Component, Input } from '@angular/core';
import { ControlContainer,  FormGroup,  NgForm  } from '@angular/forms';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]

})
export class ChildComponent  {
  @Input() formGroupName : string;
  @Input() user;
}

child.component.spec.ts 

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';

describe('ChildComponent', () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule
      ],
      declarations: [ChildComponent],

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ChildComponent);
    component = fixture.componentInstance;
    component.formGroupName = 'testingh';
    component.user = {first:'testfirst', last:'lasttest'}
    fixture.detectChanges();
  });

  it('should create', () => {
      expect(component).toBeTruthy();
  });
});

Но при тестировании компонента выдает ошибку "Нет провайдера для NgForm!" Тег формы упоминается в Parent.componet.html.

Parent.component.html 

<code><form #f="ngForm">
    <child-component [formGroupName]="'user1'" [user]="object1"></child-component>
  <child-component [formGroupName]="'user2'" [user]="object2"></child-component>
</form>
<pre>{{f.value|json}}

Как исправить тестовый набор для Дочерний компонент

1 Ответ

0 голосов
/ 15 января 2019

В вашем файле app.module.ts импортируйте FormsModule. 

import { FormsModule } from '@angular/forms';

. . .

@NgModule({

  imports: [
    FormsModule
  ]

})
...