文字问题

Question

文字问题

当我将包裹在组件中的输入添加到我的棱角形式中时，该形式不会将该输入作为属于它的控件。这意味着例如NgForm.valid不可靠，因为它不包含从组件添加的输入。

是什么导致了这种情况，我该怎么办？

作为代码的问题：

为什么以下测试失败，我该怎么办？

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

@Component({
    selector: 'test-input',
    template: `<input name="inComponent" ngModel="dummy" required>`
})
class TestInputComponent {
}

@Component({
    template: `<form><input name="inForm" ngModel="dummy"><test-input></test-input></form>`
})
class TestFormComponent {
    @ViewChild(NgForm)
    form: NgForm;
}

fdescribe('Input in Form', () => {
    let component: TestFormComponent;
    let fixture: ComponentFixture<TestFormComponent>;

    beforeEach(async (() => {
        TestBed.configureTestingModule({
            declarations: [TestFormComponent, TestInputComponent],
            imports: [FormsModule]
        })
            .compileComponents();
    }));

    beforeEach(async () => {
        fixture = TestBed.createComponent(TestFormComponent);
        component = fixture.componentInstance;
        await fixture.whenStable();
        fixture.detectChanges();
    });

    it('form has all inputs', () => {
        expect(Object.keys(component.form.controls).sort()).toEqual(['inComponent', 'inForm']);
    });
});

Answer 1

在viewProviders上使用TestInputComponent，因此它告诉angular您希望该组件使用现有的NgForm

@Component({
  selector: 'test-input',
  template: `<input name="inComponent" ngModel="dummy" required>`,
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm }]
})
export class TestInputComponent implements OnInit {}

Stackblitz：https://stackblitz.com/edit/angular-testing-kgwsca

Answer 2

您需要使用TestInputComponent制作自定义窗体控件。这是来自-善良，大约三年前的指南，但奇迹般地几乎可行： https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

除了useValue不能与内联匿名函数一起使用外，您必须声明并导出该访问器/验证器。或者改用useExisting路线。

如何从子组件中获取输入以在表单中注册？

文字问题

作为代码的问题：

2 个答案: