angular forms

angular forms.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  form = this.formBuilder.group({
    firstName: [''],
    lastName: [''],
    age: [''],
  });

  controls = {
    firstName: this.form.get('firstName'),
    lastName: this.form.get('lastName'),
  }

  constructor(private formBuilder: FormBuilder) {}
}









<form [formGroup]="form">
  <div>
    <label for="firstName">First Name</label>
    <input formControlName="firstName" id="firstName"/>
    <span *ngIf="controls.lastName.touched && controls.firstName.hasError('required')" class="errors">
      Field is required
    </span>
  </div>

  <div>
    <label for="lastName">First Name</label>
    <input formControlName="lastName" id="lastName"/>
    <span *ngIf="controls.lastName.touched && controls.lastName.hasError('required')" class="errors">
      Field is required
    </span>
  </div>
</form>