Question

我正在使用ngModelGroup对窗体中的某些字段进行分组，并将ngModelGroup包含在子组件中。这种方法效果很好

child.component.html

exports.on_user_created_update_generate_barcode = functions.database.ref("/users/{id}")
.onCreate((snapshot, context) => {
    console.log("start of on_user_created_update_generate_barcode ")   
    const user = snapshot.val();
    const referralCode = user._referralCode
    const uid = context.params.id
    console.log("Referral code is:" + referralCode + " for user:" + uid)



    bwipjs.toBuffer({
        bcid:        'code128',       // Barcode type
        text:        referralCode,    // Text to encode
        scale:       3,               // 3x scaling factor
        height:      10,              // Bar height, in millimeters
        includetext: true,            // Show human-readable text
        textxalign:  'center',        // Always good to set this
    }, function (err, png) {
        if (err) {
            console.err("failed to generate bar code:::" + err)
            return null
        } else {
            console.log("png generated")
            //console.log(png)
            const pngImg = 'data:image/png;base64,' + png.toString('base64')
            var db = admin.database();
            var userRef = db.ref('users')
            return userRef.child(uid).update({"_barcode": pngImg})
        }
    });

})

Child.component.ts

<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.spec.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;
}

但是在测试组件时会抛出错误“ NgForm没有提供者！” 表单标签在Parent.componet.html中提到。

Parent.component.html

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();
  });
});

如何为子组件

修复测试用例

Answer 1

在您的app.module.ts文件中，导入FormsModule。

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

. . .

@NgModule({

  imports: [
    FormsModule
  ]

})

没有提供者NgFrom

1 个答案: