Reactive Forms

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { FormGroup, FormControl } from '@angular/forms';

loginReactiveForm: FormGroup = new FormGroup({
    user: new FormControl(''),
    password: new FormControl(''),
});

category: new FormControl('Papers');

category: new FormControl({value: 'Papers', disabled: true});

<div class="container">
  <h1 class="mb-4">Reactive forms</h1>
  <form [formGroup]="loginReactiveForm" (ngSubmit)="loginUser()">
    <input type="text" formControlName="user" placeholder="Enter name"/>
    <br /><br />
    <input type="password" formControlName="password" placeholder="Enter password"/>
    <br /><br />
    <button>Login</button>
  </form>
</div>

loginUser() {
    console.log(this.loginReactiveForm.value);
}

import { FormGroup, FormControl, Validators } from '@angular/forms';

loginReactiveForm = new FormGroup({
    user: new FormControl('', [Validators.required]),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(6),
    ]),
});

input.ng-invalid.ng-touched{
…
}

get user() {
    return this.loginReactiveForm.get('user');
}
get password() {
    return this.loginReactiveForm.get('password');
}

<form [formGroup]="loginReactiveForm" (ngSubmit)="loginUser()">
    <input type="text" formControlName="user" placeholder="Enter name" />
    <br /><br />

    <div
      class="alert alert-danger"
      role="alert"
      *ngIf="user && user.invalid && user.touched">
      The user name is not valid.
    </div>

    <br />

    <input
      type="password"
      formControlName="password"
      placeholder="Enter password"/>

    <br /><br />

    <div
      class="alert alert-danger"
      role="alert"
      *ngIf="password && password.invalid && password.touched">
      The password is not valid.
    </div>

    <br />
    <button [disabled]="loginReactiveForm.invalid">Login</button>
</form>

<form [formGroup]="contactForm" (ngSubmit)="onContactSubmit()">
    <div formGroupName="presonalDetails">
      <input type="text" formControlName="firstName">
      <input type="text" formControlName="lastName">
      <input type="text" formControlName="email">
      <span *ngIf="!contactForm.get('presonalDetails.email')">Enter a valid email.</span> 
    </div>

    <input type="text" formControlName="message">
</form>

contactForm: FormGroup = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: new FormControl(''),
    message: new FormControl(''),
});

contactForm: FormGroup = new FormGroup({
    presonalDetails: new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      email: new FormControl(''),
    }),
    
    message: new FormControl(''),
});

contactForm: FormGroup = new FormGroup({
    presonalDetails: new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      email: new FormControl(''),
    }),
    message: new FormControl(''),
    subjects: new FormArray([
      new FormControl(null),
    ])
});

addSubject(){
    (<FormArray>this.contactForm.get('subjects')).push(new FormControl(null));
}

<form [formGroup]="contactForm" (ngSubmit)="onContactSubmit()">
    <div formGroupName="presonalDetails">
      <input type="text" formControlName="firstName" />
      <input type="text" formControlName="lastName" />
      <input type="text" formControlName="email" />
      <span *ngIf="!contactForm.get('presonalDetails.email')"
        >Enter a valid email.</span
      >
    </div>
    <input type="text" formControlName="message" />
    <div formArrayName="subjects">
      <ng-container
        *ngFor="let subject of contactForm.get('subjects')['controls']; index as i"
      >
        <input type="text" placeholder="add subject..." formControlName="{{ i }}"/>
      </ng-container>
      <button (click)="addSubject()">Add subject</button>
    </div>
</form>

(<FormArray>this.contactForm.get('subjects')).push(new FormControl(null, Validators.required));