Here is my solution using a newly generated Directive:

  ng generate directive directive/mark-asterisk

This snippet shows the complete code of the directive:

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

To use this directive in your HTML form, include it like so:

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

Once Angular v13 is officially launched, this issue should be resolved. Check out the progress at this GitHub link

HTML

<span *ngIf="input1?.required">*</span>

.TS

If you need to make an input required based on certain conditions, refer to this source

To indicate required validation in a reactive form field, you can bind the required attribute to the input element and display an asterisk (*) when validation is triggered.

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

Implementing a directive or using the required attribute on the element may serve as a quick fix for now, but rest assured that a permanent solution is in the works and will be implemented shortly!

The issue at hand can be found here: https://github.com/angular/components/issues/2574?_pjax=%23js-repo-pjax-container.

Various temporary workarounds have been proposed in the comments section. I will make sure to update this response once the bug has been properly addressed.

Although there isn't a clear-cut solution readily available, I do have a suggestion to offer:

@Component({
  selector: "app-root",
  template: `
    <form [formGroup]="formGroup">
      <mat-form-field>
        <input
          matInput
          type="text"
          [required]="isRequired(input1.field_name)"
          [placeholder]="input1.title"
          [formControlName]="input1.field_name"
        />
      </mat-form-field>
    </form>
  `,
})
export class AppComponent {
  readonly formGroup = new FormGroup({
    name: new FormControl("", Validators.required),
  });

  readonly input1 = { field_name: "name", title: "Name", type: "string" };

  isRequired(name: string): boolean {
    return this.formGroup.get(name)?.hasValidator(Validators.required) ?? false;
  }
}

It appears that the validators are executed from the typescript file, however, you can easily add an asterisk by modifying the html file.

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

To start, develop a directive that will insert an asterisk without interfering with input attributes:

import { AfterContentChecked, Directive, Optional } from "@angular/core";
import { AbstractControl } from "@angular/forms";
import { MatFormField, MatInput, MatSelect } from "@angular/material";

/**
 * For Input/Select elements within FormField, apply the Validator.required from reactive forms if the [required] attribute is absent in the template
 */
@Directive({
  selector: 'mat-form-field:has(input:not([required])), mat-form-field:has(mat-select:not([required]))'
})
export class ReactiveAsteriskDirective implements AfterContentChecked {
  constructor(@Optional() private matFormField: MatFormField) { }

  ngAfterContentChecked() {
    if (this.matFormField) {
      const ctrl = this.matFormField._control;
      if (ctrl instanceof MatInput || ctrl instanceof MatSelect)
        if (ctrl.ngControl)
          if (ctrl.ngControl.control)
            if (ctrl.ngControl.control.validator)
              if (ctrl.ngControl.control.validator({} as AbstractControl))
                ctrl.required = ctrl.ngControl.control.validator({} as AbstractControl).required;
    }
  }
}

Next, you can modify the appearance of the asterisk by making it red to signify a mandatory input field. Simply add the following CSS to your component:

:host ::ng-deep .mat-placeholder-required {
  color: red;
}

An attribute directive can be created to automatically add the required attribute to an element based on the presence of the Validators.required validator in the corresponding form control:

import { Directive, ElementRef, OnInit } from '@angular/core';
import { FormControlName, NgControl, Validators } from '@angular/forms';

@Directive({
  selector: '[formControl], [formControlName]',
  standalone: true,
})
export class FormControlRequiredAttributeDirective implements OnInit {
  constructor(private elementRef: ElementRef, private ngControl: NgControl) {}

  ngOnInit(): void {
    if (
      (this.ngControl instanceof FormControlName || this.ngControl instanceof FormControlDirective) && 
      this.ngControl.control.hasValidator(Validators.required)
    ) {
      this.elementRef.nativeElement.required = 'true';
    }
  }
}

Simply importing and using this directive in your component will apply the functionality:

@Component({
  imports: [ReactiveFormsModule, FormControlRequiredAttributeDirective],
  // ...
})
class LoginFormComponent {
  formGroup: FormGroup = new FormGroup({
    email: new FormControl('', Validators.required),
  });
}

<form [formGroup]="formGroup">
  <label>
    <span>Email</span>
    <input type="email" formControlName="email" />
  </label>
</form>

By following this approach, you ensure that validators are the sole source of truth, reducing repetition in your code.