Css 如何添加'；必填字段'；星号至角反应式输入

我正在开发一个反应式动态角度形式的应用程序。此表单字段来自API请求，并动态生成

我真的需要在我的表单输入中添加“必填字段”星号（*）。如何做到这一点

下面是我的表单字段的外观

<ng-container *ngIf="input1.type=='string'" [hidden]="False">
 <div>
  <mat-form-field>
   <input matInput   [formControlName]="input1.field_name"  type="text"  placeholder="{{input1.title}}">
  </mat-form-field>   
 </div>
</ng-container>

Html

*

.ts

---

您希望根据某些条件要求输入。看一看

看起来实际的验证器将从typescript文件运行，但是为了实际获得星号，您可以编辑html文件

---

将所需属性绑定到输入，以便在反应表单字段的所需验证时显示*

<input formControlName="name" [required]="formGroup.get('name').errors !== null && formGroup.get('name').errors.required">

---

我在FormGroup中设置了所需的位，所以我不需要在html中也设置它。插入的css类

ng星号已添加到类列表中，但未添加星号。我刚刚添加了我认为应该是css的内容：

mat label.ng星形插入：：之后{
内容：“*”；
}

编辑：我研究了angular如何处理带有
[required]=“condition”
的模板表单，看起来它在标签后面添加了一个
*

我不知道为什么添加css对我有效。既然我做了这个测试，所有其他元素都用插入的.ng星号标记。它们都是输入/标签/div/对话框/图标。因此，当我把它放回去时，到处都是星星。
我的解决方案是生成新指令：

  ng generate directive directive/mark-asterisk

这是指令的完整代码：

import {Directive, ElementRef, Input, OnInit} from '@angular/core';
import {FormGroup} from '@angular/forms';

@Directive({
  selector: '[appMarkAsterisk]'
})
export class MarkAsteriskDirective implements OnInit {
  @Input() formGroup: FormGroup;
  @Input() controlName: string;

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit(): void {
    const isRequired = this.formGroup.controls[this.controlName]?.errors?.required;
    if (isRequired) {
      this.elementRef.nativeElement.innerHTML = '*';
    }else{
      this.elementRef.nativeElement.innerHTML = '';
    }
  }
}

现在，在HTML表单中，按如下方式使用：

<label>Company name: <span appMarkAsterisk [formGroup]="formGroup" [controlName]="'companyName'"></span></label>

公司名称：
@ochs.tobi这不是他问的问题。不，他给了我正确的建议，这就是我想要实现的。是所有字段都需要，还是只有一些字段？您能为我们显示必填字段的呈现HTML吗？@Jaydeep您不想在必填字段中添加星号吗？请务必确保formControlName周围不应有方括号，因为Gular不鼓励在被动表单中使用属性值。这是模板驱动的，OP要求被动表单。
<label>Company name: <span appMarkAsterisk [formGroup]="formGroup" [controlName]="'companyName'"></span></label>