Angular 如果输入为空，如何将占位符设置为有效值

我有一个带有占位符值（建议用户名）的用户名的简单表单，希望用户只需单击“Go”， 不添加特定用户名，因此表单应将占位符值设置为其用户名

formBuilder：

this.formBuilder.group({
  username: ['', Validators.compose([
    Validators.required,
    Validators.pattern('[A-Za-zäöüéèàáóúûñÄÖÜß]{3,20}$')
  ])]
});

输入：（例如：suggestedUsername=“JohnDoe12”）

名称无效！（仅限字母，3至20个字符）

去

---

当我单击“Go”时，输入计数为空，我得到错误。如何修复此问题？

您可以从表单控件中删除所需的验证器，然后在保存函数中修补

用户名

值：

this.form=this.formBuilder.group({
用户名：[''，Validators.compose([
验证器模式（“[A-Za-zäöèèèèèèèèèèèèèèè23
])]
});
// ...
保存（）{
如果（！this.form.get（'username'）.value）{
this.form.patchValue（{username:this.suggestedUsername}）；
}
//...
}

或者，您可以从一开始就设置值，但这可能是一个糟糕的用户体验

<ion-input color="light" type="text" formControlName="username" placeholder="{{ suggestedUsername }}"></ion-input>

<p *ngIf="form.username.errors && hasError">
   <ion-text color="danger" *ngIf="form.username.errors">
     Name is invalid! (letters only, 3 to 20 characters)
   </ion-text>
</p>

<ion-button (click)="save()">Go</ion-button>