Question

我正在开发一种具有反应动态角形的应用程序。此表单字段来自API请求，并且是动态生成的。

我真的需要添加＆＃39;必填字段＆＃39;星号（*）到我的表格输入是必需的。怎么做到这一点？

以下是我的表单字段的外观。

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

Answer 1

似乎实际的验证器将从typescript文件运行，但为了实际获得星号，您只需编辑html文件。

＆＃13;

<input matInput   [formControlName]="input1.field_name"  type="text"  placeholder="{{input1.title}}" required>

＆＃13;

Answer 2

将必填属性绑定到输入，以在反应式表单字段中的必填验证中显示*。

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

Answer 3

我通过生成新指令的解决方案：

  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>

Answer 4

HTML

@ComponentImport private final ProcessService processService;
@ComponentImport private final CapabilityContext capabilityContext;

public RobotTestTaskType(final ProcessService processService, final CapabilityContext capabilityContext)

{ this.processService = processService; this.capabilityContext = capabilityContext; }
String robotExecutable = capabilityContext.getCapabilityValue("system.builder.command.robot");

.TS

您想根据某些条件要求输入。看看here

Answer 5

我在FormGroup中设置了所需的位，所以我也不需要在html中设置它。 CSS类ng-star-inserted已添加到类列表中，但未添加星号。我只是添加了我认为应该是CSS的内容：

mat-label.ng-star-inserted::after {
    content: " *";
}

编辑：我研究了[required]="condition"与模板形式的角度关系，看起来好像在标签后面添加了<span class="ng-star-inserted"> *</span>。

我不知道为什么添加CSS对我有用。现在，我进行了此测试，所有其他元素都标记为.ng-star-inserted。它们全部都是输入/标签/ div /对话框/图标。所以当我把它放回去时，到处都是星星。

如何添加＆＃39;必填字段＆＃39;星号到角度反应形式输入

5 个答案: