角度表单验证如何输出错误消息

时间:2018-05-27 09:53:53

标签: angular karma-runner

我正在以角度测试此模板驱动表单。

<form  name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
  <input #cardInput type="text" class="form-control" name="name" id="id_name"
         [(ngModel)]="pacient.name" maxlength="20" />
  <small class="form-text text-danger" id ="ref"[hidden]="!editForm.controls.name?.errors?.maxlength"
         jhiTranslate="entity.validation.maxlength" translateValues="{ max: 20 }">
    This field cannot be longer than 20 characters.
  </small>
</form>

我正在测试它输出错误信息时是否有效,如下所示:

 fit ('Blank input is not valid', async(() => {
               
                comp.paciente.tarjetaSanitaria = 'ddddddddddddddddddddddddddddddddd' ;      
            

                }));    

如何在输入无效时输出错误消息?

1 个答案:

答案 0 :(得分:1)

通过检查隐藏属性

来尝试此操作
errorMessage = fixture.debugElement.query(By.css('.text-danger'));
errorMessageElement = errorMessage.nativeElement;
expect(errorMessageElement.hasAttribute('hidden')).toEqual(false);

测试所有错误信息你可以使用queryAll而不是查询,queryAll返回一个DebugElements数组,它可以是这样的

errorMessages = fixture.debugElement.queryAll (By.css('.text-danger'));
errorMessages.foreach(element => {
errorMessageElement = element.nativeElement;
 expect(errorMessageElement.hasAttribute('hidden')).toEqual(false);
})