Angular reactive forms, adding and removing fields?

The FormGroup API exposes methods such as addControl and removeControl which you can use to add or remove controls from your form group after it has been initialized.

An example using these methods might look like:

formMode: 'add' | 'update';
userForm: FormGroup;

ngOnInit() {
  this.form = this.formBuilder.group({ 
    firstName: [''],
    lastName: ['']
  });
}

changeMode(mode: 'add' | 'update') {
  if (mode === 'add') {
    if (!this.form.get('firstName')) {
      this.form.addControl('firstName');
    }
    this.form.removeControl('lastName');
  } else {
    if (!this.form.get('lastName')) {
      this.form.addControl('lastName');
    }
    this.form.removeControl('firstName');
  }
}

onChange(event: 'add' | 'update') {
  this.changeMode(event);
}

You'll probably want your DOM to reflect the state of your form by adding *ngIf checks based on the existence of a given control:

<input *ngIf="form.get('lastName')" formControlName="lastName"> 

addControl RemoveControl using u can hide and show your Fields.

<div>
    <label>Description<i class="fa fa-pencil" aria-hidden="true" (click)="editField(formControlKeys.description)"></i></label>
    <h6 *ngIf="!detailForm.controls.description; else showDescriptionField">{{ projectData?.description }}</h6>
    <ng-template #showDescriptionField>
      <textarea formControlName="description" class="form-control" rows="2"></textarea>
      <i class="fa fa-close" (click)="removeDescriptionControl()"></i>
    </ng-template>
  </div>

Add control:

editField(this.formControlKeys.description){
        this.detailForm.addControl('description', new FormControl(''));
        this.detailForm.controls['description'].setValue(this.projectData.description);
}

remove control:

 removeDescriptionControl() {
    this.detailForm.removeControl('description');
  }

create form group first:

 this.detailForm = this.formBuilder.group({
    });

set formControlKeys:

formControlKeys = {
    description: 'description'
  };

This is the most simple replication of add/remove for conditional angular form controls.

Seeing that you have a form with a checkbox control named someCheckboxControl watch for its boolean changes to add/remove the other control.

ngOnInit() {
   this.form.controls['someCheckboxControl'].valueChanges.subscribe(someCheckboxControlVal => {
       if (someCheckboxControlVal) {
           this.form.addControl('SomeControl', new FormControl('', Validators.required));
       } else {
           this.form.removeControl('SomeControl');
       }
   });
}

HTML

<input *ngIf="form.get('someCheckboxControl').value" formControlName="remoteLocations"</input>