Angular 如何在表单字段中以角度指定固定文本？

我有两个字段。一个是Id，另一个是URL。我的问题是如何在字段中提供固定文本。 在下面的代码中，在URL字段中，用户必须给出IP地址和端口号。在该字段中，应该有固定的文本https:\。用户的数据应该在此之后输入https:\。在数据库中存储时，数据应该类似于https:\192.145.23.45\7894

请回答这个问题

提前感谢：）

网址
url是必需的
注意：服务器：端口号

您可以通过在输入字段中添加一个简单的函数来实现

（focusin）=“addPrefix（$event）”

---

请参阅工作说明。

由于您使用的是被动表单，因此不建议（也不推荐）将

ngModel

与被动表单一起使用。我提出这个问题，因为另一个答案使用它

相反，我建议您倾听表单的

valueChanges

，并始终将

https://

附加到表单控件。当值为https://

然后，您可以使用自定义验证器来检查值（因为

验证器。在这种情况下，required

不适用，因为控件始终具有值

https://

，无论发生什么情况），并设置自定义错误或返回

null

，这被视为有效

因此，我建议如下：

从'rxjs/operator'导入{filter}
恩戈尼尼特（）{
this.appawareform=this.formBuilder.group({
url:[“https://”，this.validateUrl]
});
this.appawareform.get（“url”）.valueChanges.pipe(
筛选器（值=>value！='https://'）
).subscribe（值=>{
这是AppareForm
.get（“url”）
//我们需要添加emitEvent:false以避免无限循环
.patchValue（“https://”+value.substring（8），{emitEvent:false}）；
});
}
validateUrl（c:FormControl）{
返回c.value==“https://”？{notValid:true}:null；
}

然后在模板中检查此错误：

---

到目前为止您尝试了什么？这是否回答了您的问题？您可以在mat表单字段中添加
https://
，以显示它。要存储它，只需在发送到服务器之前修补该值。我使用的是appearence大纲。因此它重叠。还有其他方法吗？事实上，我也使用了它。但问题是它第一次显示，但再次单击时，这意味着它不显示。我修改了上面的演示，添加了ngModel，因此如果再次单击，它将显示该值。请现在检查。它正在工作。但是你能解释一下为什么我们要添加NGmodel吗？不客气。如果任何一个答案适合你，你可以考虑在答案的投票下点击灰色记号来接受答案。
<mat-form-field appearance="outline">
   <mat-label>url</mat-label>
   <input matInput placeholder="Url"formControlName="url" >
   <mat-error *ngIf="appawareform.controls.url.invalid  && 
    appawareform.controls.url.touched && 
    !appawareform.controls.url.value">url is required</mat-error>
   <mat-hint align="start">NOTE:server:portno</mat-hint>
</mat-form-field>