Angular 4+表单验证

Question

我是新手，他编写了一个带有表单的页面，但是经过验证，我面临的情况似乎并不适合实际应用。

我写了下面的代码，

this.signupForm = new FormGroup({
  firstName: new FormControl('default first name', [
    Validators.maxLength(20), 
    Validators.required
  ]),
  lastName: new FormControl('default last name', [
    Validators.maxLength(20), 
    Validators.required
  ])
});

现在我必须提供“默认名字”，因为该字段标记有Validator.required。

无论如何，我可以通过该字段使字段为必填项，而无需提供默认值。

Answer 1

只需尝试在表单中设置触摸条件，添加signupForm.get('firstName').touched即可：

<div>
   First Name
   <input formControlName="firstName" placeholder="First Name">
   <br>
   <label *ngIf="signupForm.get('firstName').invalid && signupForm.get('firstName').touched" [ngClass]="'error'">{{signup_errmsg.firstName}}</label>
   <br>
</div>