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

Question

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

请回答这个问题。

提前致谢：)

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

Answer 1

您可以通过在输入字段上添加一个简单的函数来做到这一点。

(focusin)="addPrefix($event)"

请看工作demo。

Answer 2

由于您使用的是响应式表单，因此不建议（也已弃用）将ngModel 与响应式表单一起使用。我提出了这个，因为另一个答案使用它。

相反，我建议收听表单的valueChanges，并始终将https:// 附加到表单控件。当值为https://时，我们可以使用rxjs filter过滤掉

然后您可以使用自定义验证器来检查值（因为 Validators.required 在这种情况下不适用，因为无论如何控件将始终具有值 https://）并设置自定义错误或返回 null ，这被认为是有效的。

所以我建议如下：

import { filter } from 'rxjs/operator'

ngOnInit() {
  this.appawareform = this.formBuilder.group({
    url: ["https://", this.validateUrl]
  });

  this.appawareform.get("url").valueChanges.pipe(
    filter(value => value !== 'https://')
  ).subscribe(value => {
    this.appawareform
      .get("url")
      // we need to add emitEvent:false to avoid infinite loop
      .patchValue("https://" + value.substring(8), { emitEvent: false });
  });
}

validateUrl(c: FormControl) {
  return c.value === "https://" ? { notValid: true } : null;
}

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

<mat-error *ngIf="appawareform.hasError('notValid', 'url')>...</mat-error>

那还要记得在组件被销毁时退订valueChanges！

STACKBLITZ

P.S，这不会检查用户输入的 IP 和端口是否有效。您还需要扩展自定义验证器来检查它。但由于这不是你问题的范围，我不包括在内。