css - Hur man lägger till asterisk för 'obligatoriskt fält' till Angular reaktiva formulärfält

Jag utvecklar en applikation med ett reaktivt dynamiskt Angular-formulär. Formulärets fält kommer från en API-förfrågan och genereras dynamiskt.

Jag behöver verkligen lägga till en asterisk (*) för 'obligatoriskt fält' till mina formulärfält som är obligatoriska. Hur uppnår man detta?

Nedan är hur mina formulärfält ser ut.

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

Svar #1

Min lösning genom att generera en ny direktiv:

  ng generate directive directive/mark-asterisk

Detta är fullständig kod för direktivet:

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 = '';
    }
  }
}

Nu i ditt HTML-formulär, använd det så här:

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

Svar #2

Bör fixas när Angular v13 släpps. https://github.com/angular/components/pull/23362

Relaterade artiklar