以角度形式添加验证器

Question

我正在测试此html表单：

  <input #nhcInput type="text" class="form-control" name="nhc" id="field_nhc" [(ngModel)]="paciente.nhc" maxlength="38" pattern="[0-9]+"/> <div [hidden]="!(editForm.controls.nhc?.dirty && editForm.controls.nhc?.invalid)"> <small class="form-text text-danger" [hidden]="!editForm.controls.nhc?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 38 }"> This field cannot be longer than 38 characters. </small> 

 TEH RESULT {{nhcInput.className}} //This line prints ng-valid/ dirty, touched correctly 

我的组件中有这个：

  paciente: Paciente = {nhc: '23423' } as Paciente; 

  it ('NHC cannot have more than 38 characters', async(() => { comp.paciente.nhc = 'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr' ; console.log(fixture.nativeElement.querySelector('input[name="nhc"]').className); fixture.detectChanges(); expect(fixture.nativeElement.querySelector('input[name="nhc"]').className.includes('ng-invalid')).toEqual(true); })); 

现在，我想通过检查验证程序来测试有效性。 console.log因为没有找到验证器，所以只打印出窗体控制，而没有验证器的类型。

我在组件中放置了一个用于此fild的验证器：

 @ViewChild('editForm') editForm: any; editform.controls["nhc"].setValidators([ Validators.maxLength(38)]); 

但这不起作用。 我在这里做错什么吗？

谢谢！

Answer 1

您的问题来自于这样一个事实，即您没有按顺序进行操作，也不依赖框架进行测试。

我制作了一个具有测试功能的沙盒 ，随时查看。 现在进行解释：

让我们从组件开始：

@Component({
  selector: 'hello',
  template: `
  <form #myForm="ngForm">
    <input type="text" maxlength="20" name="patient" id="patient" [(ngModel)]="patient">
  </form>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @ViewChild('myForm') myForm: NgForm;
  patient: string;
}

一个非常简单的组件，具有模板驱动的表单以及基本的验证和绑定。

如果你这样做

ngOnInit() {
  console.log(this.myForm.controls);
  setTimeout(() => console.log(this.myForm.controls));
}

您将同时看到undefined和{ patient: FormControl } 。 发生这种情况是因为您在执行测试之前不等待视图初始化。 这意味着测试找不到表单控件，因此无法通过。

现在进行测试：

import { Component } from '@angular/core';
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { HelloComponent } from './hello.component';

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

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [HelloComponent]
    });

    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.debugElement.children[0].componentInstance;

    fixture.detectChanges();
  });

  it('should be invalid with more than 20 chars', async(() => {
    setTimeout(() => {
      component.myForm.controls['patient'].setValue('ddddddddddddddddddddd'); // 21
      fixture.detectChanges();
      expect(component.myForm.control.invalid).toEqual(true);
    });
  }));
});

开始非常基本，已配置测试台并检测到更改。

现在是您要测试的部分：首先必须等待组件加载超时，然后才需要使用框架在表单上设置值：

component.myForm.controls['patient'].setValue('ddddddddddddddddddddd'); // 21

此接口输入21 d到输入，这是使其无效。 之后，您需要触发更改检测，现在您可以使用

expect(component.myForm.control.invalid).toEqual(true);

这将以表单作为控件，这意味着它具有FormControl拥有的所有属性和功能。 其中，您可以找到invalid属性，该属性指出您的控件是否处于无效状态。

同样，我必须指出这种测试是无用的，因为您基本上是在尝试查看框架是否正常运行。 那不是你的工作，那是Angular团队的工作。 如果您想测试某项内容，则应测试该表单处于无效状态时无法提交该表单，这是一种业务规则（我想），并且可以防止副作用（与该测试不同）。