Armenvardanyan95

@Directive({
  selector: '[formControl]'
})
export class TrimDirective implements OnInit {

  constructor(
    private ngControl: NgControl,
  ) { }

  ngOnInit() {

Armenvardanyan95

interface RawFormValue {
  firstName: string;
  lastName: string;
  age: number;
}

function toRawFormValue<T extends RawFormValue>(serverData: T): RawFormValue {
  return {
    firstName: serverData.firstName,
    lastName: serverData.lastName,

Armenvardanyan95

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

Armenvardanyan95

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

Armenvardanyan95

<custom-component formControlName="controlName"></custom-component>

Armenvardanyan95

export class AppComponent  {
  // rest of the component implementation is ommitted for brevity

  submit() {
    if (this.form.valid) {
      const article = new ArticleDTO(this.form.value as RawFormValue);
      // now send the article DTO to the backend using one of your services
    }
  }
}

Armenvardanyan95

export class ArticleDTO {
  title: string;
  tags: string;
  date: string;
  referenceIds: number[];

  constructor(formValue: RawFormValue) {
    this.title = formValue.title;
    this.tags = formValue.tags.join(',');
    this.date = formValue.date.toISOString();

Armenvardanyan95

<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>

Armenvardanyan95

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

Armenvardanyan95

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

  <div>