如何在输入为空时将占位符设置为有效值

Question

我有一个带有占位符值(建议的用户名(的用户名的简单表单，并希望用户能够单击"Go"， 无需添加特定用户名，因此表单应将占位符值设置为其用户名。

表单生成器：

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

输入：(例如：建议的用户名="JohnDoe12"(

<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>

当我只需单击"Go"时，输入计数为空，并且出现错误。我该如何解决这个问题？

Answer 1

您可以从表单控件中删除所需的验证程序，并在保存函数上修补username值：

this.form = this.formBuilder.group({
username: ['', Validators.compose([
Validators.pattern('[A-Za-zäöüéèàáóúûñÄÖÜß]{3,20}$')
])]
});
// ...
save() {
if (!this.form.get('username').value) {
this.form.patchValue({ username: this.suggestedUsername });
}
//...
}

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