Question

HTML：

<input type="text" id="txtFName" formControlName="firstName" required/>

<input type="submit" id="btnSubmit" value="Submit" (click)="save()"/>

component.ts：

ngOnInit(){
    this.regForm=this.formBuilder.group({
        firstName:['', Validators.required],
        lastName:['', Validators.required],
        eMail:['', Validators.required],
        DOB:['', Validators.required]
    })
}

    save():void
{
    console.log(this.regForm.value);
}

点击提交按钮时，不会出现所需的验证。

请让我知道需要做什么

Answer 1

对于用户的提醒：

<div *ngIf="regForm.hasError('firstName', ['required'])">Required</div>

验证

save() {
  if (this.regForm.invalid) { /* error */ }
}

Answer 2

如果表单无效，您可以禁用提交按钮

<input type="submit" id="btnSubmit" value="Submit" (click)="save()" [disabled]="!form.valid"/> // form is the formGroup name

或使用错误消息

<input type="text" id="txtFName" formControlName="firstName" required/>
<div [hidden]="firstName.valid">Name Required</div>

Angular 2：未显示所需的验证

2 个答案: