<form>
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>
</form>

export class ContactUsRequest {
  firstName: string;
  lastName: string;
  email: string;
  address: string;
  message: string;
}

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>
</form>

export class ContactUsRequest {
  firstName: string;
  lastName: string;
  email: string;
  address: string;
  message: string;
}

export class ContactUsRequest {
  firstName: string;
  lastName: string;
  email: string;
  address: string;
  message: string;
}

npm i @angular/forms

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

@NgModule({
  imports: [
    ReactiveFormsModule,
  ],
})
export class MyModule

@Component({
  template: `
    <input type="text" [formControl]="name">

    Value: {{ name.value }}

    <button (click)="updateName()">Update Name</button>
  `,
})
export class NameEditorComponent {
  name = new FormControl('');
  
  updateName() {
    const newName = this.name.value;
    // send name to server or whatever
  }
}

@Component({
  template: `
    <div [formGroup]="address">
      <h3>Address</h3>

      <label>Street: <input type="text" formControlName="street"></label>

      <label>City: <input type="text" formControlName="city"></label>
    </div>
  `,
})
export class AddressEditorComponent {
  
  address = new FormGroup({
    street: new FormControl(),
    city: new FormControl(),
  });
}

@Component({
  template: `
    <div [formGroup]="address">
      <h3>Address</h3>

      <label>Street: <input type="text" formControlName="street"></label>

      <label>City: <input type="text" formControlName="city"></label>
    </div>
  `,
})
export class AddressEditorComponent {
  
  address = this.fb.group({
    street: [''],
    city: [''],
  });
  
  constructor(private fb: FormBuilder) {}
}

@Component({
  template: `
    ...
    <button [disabled]="name.invalid" (click)="updateName()">
      Update Name
    </button>
  `,
})
export class NameEditorComponent {
  name = new FormControl('', [
    Validators.required,
    Validators.minLength(8),
  ]);
  
  updateName() {
    const newName = this.name.value;
    // send name to server or whatever
  }
}

@Component({
  template: `
    <input [formControl]="name">
    
    <ul>
      <li *ngFor="let user of users$ | async">{{ user.name }}</li>
    </ul>
  `,
})
export class NameEditorComponent {
  name = new FormControl('', [
    Validators.required,
    Validators.minLength(8),
  ]);
  
  users$: Observable<User> = this.name.valueChanges
    .pipe(
      debounceTime(300),
      map((name: string) => this.userService.find(name)),
    )
  
  constructor(private userService: UserService) {}
}