Question

我在Angular中有一个Modell驱动的Form，它包含以下输入字段（以及其他正常工作的输入字段（input）：

 <div class="form-group">
      <textarea class="form-control" type="text" id="message" name="message" placeholder="Message" rows="7" formControlname="message"></textarea>
      <small [hidden]="contactForm.controls['message'].valid || (contactForm.controls['subject'].untouched && !submitted)">
        Please enter a Message
      </small>
 </div>

在组件中我确实使用以下方法定义了一些验证：

ngOnInit() {
    this.contactForm = new FormGroup({
        message: new FormControl('', [Validators.required]),
    });
}

但是消息永远不会有效（HTML总是显示Please enter a Message）

虽然以下单元测试确实按预期工作：

it('message control should not be valid without input', () => {
  const messageControl: AbstractControl = component.contactForm.controls['message'];

  messageControl.setValue('');
  expect(messageControl.valid).toBe(false);
});

it('message control should be valid with any input', () => {
   const messageControl: AbstractControl = component.contactForm.controls['message'];

   messageControl.setValue('Some Message');
   expect(messageControl.valid).toBe(true);
});

给出了预期的结果。当我手动输入值时，为什么验证无法正常工作？

Answer 1

首先将表单绑定在表单组中

<div class="form-group" [formGroup]="contactForm">
<textarea class="form-control" type="text" id="message" name="message" placeholder="Message" rows="7" formControlname="message"></textarea>
<small [hidden]="contactForm.controls['message'].valid || (contactForm.controls['subject'].untouched && !submitted)">
        Please enter a Message
</small>

TextArea验证无法正常工作

1 个答案: