shadow1349

<form>
  <label>
    Name:
    <input type="text" name="name" required>
  </label>
  <button type="submit">Submit</button>
</form>

shadow1349

<form #myForm="ngForm">
  <label>
    Name:
    <input type="text" name="name" [(ngModel)]="name" required>
  </label>
  <button type="submit">Submit</button>
</form>

shadow1349

<form #myForm="ngForm">
  <div ngModelGroup="user">
    <label>
      Name:
      <input type="text" name="name" [(ngModel)]="name" required>
    </label>
    <div *ngIf="myForm.controls['user']?.controls['name'].invalid && myForm.controls['user']?.controls['name'].touched">
      <div *ngIf="myForm.controls['user']?.controls['name'].errors.required">Name is required</div>
    </div>
  </div>

shadow1349

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
})
export class FormComponent {
  name: string;

  onSubmit() {

shadow1349

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <div ngModelGroup="user">
    <label>
      Name:
      <input type="text" name="name" [(ngModel)]="name" required>
    </label>
    <div *ngIf="myForm.controls['user']?.controls['name'].invalid && myForm.controls['user']?.controls['name'].touched">
      <div *ngIf="myForm.controls['user']?.controls['name'].errors.required">Name is required</div>
    </div>
  </div>