Angular - Disable FormGroup not working

<!doctype html>

<html>

<head>
 <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = '^6.1.0'
    </script>
    <title>Angular - Disable FormGroup not working</title>    
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

var angularVersion;
if (window.AngularVersionForThisPlunker === 'latest') {
  angularVersion = ''; //picks up latest
} else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true,
  },
  paths: {
    'npm:': 'https://unpkg.com/',
  },
  //map tells the System loader where to look for things
  map: {
    app: './src',
     rxjs: 'npm:rxjs@6.0.0/index.js',    
    "rxjs-compat": "npm:rxjs@6.1.0/Rx.js",
    "rxjs/operators":'npm:rxjs@6.1.0/operators/index.js',
    '@angular/core':
      'npm:@angular/core' + angularVersion + '/bundles/core.umd.js',
    '@angular/common':
      'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/compiler':
      'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
    '@angular/platform-browser':
      'npm:@angular/platform-browser' +
      angularVersion +
      '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic':
      'npm:@angular/platform-browser-dynamic' +
      angularVersion +
      '/bundles/platform-browser-dynamic.umd.js',

    //Added for HttpClient Module
    '@angular/common/http':
      'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',

    '@angular/router':
      'npm:@angular/router' + angularVersion + '/bundles/router.umd.js',
    '@angular/forms':
      'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations':
      'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations':
      'npm:@angular/platform-browser' +
      angularVersion +
      '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser':
      'npm:@angular/animations' +
      angularVersion +
      '/bundles/animations-browser.umd.js',           
    typescript: 'npm:typescript@2.2.1/lib/typescript.js',
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts',
    },
    rxjs: {
      defaultExtension: 'js',
    },
  },
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

h1,
p {
    font-family: sans-serif;
}

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { PersonService } from './person.service';

import { App } from './app';

@NgModule({
    imports: [BrowserModule, HttpClientModule, ReactiveFormsModule],
    declarations: [App],
    bootstrap: [App],
    providers: [
        PersonService
    ]
})
export class AppModule {}

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { PersonService } from './person.service';

@Component({
  selector: 'my-app',
  template: `  
        <form [formGroup]="form">    
        <button class="btn btn-primary" (click)="onFetchPerson()">Click Me (does not disable)</button>                
        <button class="btn btn-success ml-2" (click)="onFetchPerson2()">Click Me (does disable)</button>    
            <div class="form-group">
                <label>First Name</label>
                <input type="text" class="form-control" formControlName="firstName" />
            </div>
            <div class="form-group">
                <label>Surname</label>
                <input type="text" class="form-control" formControlName="surname" />
            </div>
            <div class="form-group">                
                Disabled:{{form.disabled}}<br>
                Status:{{form.status}}
            </div>
        </form>
    `,
})
export class App implements OnInit {
  public form: FormGroup;

  constructor(private personService: PersonService) {}

  ngOnInit(): void {
    this.form = new FormGroup({
      firstName: new FormControl(),
      surname: new FormControl(),
    });
  }

  public onFetchPerson() {
    this.personService.fetchPerson().subscribe(() => {
      this.form = new FormGroup({
        firstName: new FormControl('John'),
        surname: new FormControl('Doe'),
      });
      this.form.disable();
      console.log(this.form);
    });
  }

  public onFetchPerson2() {
    this.personService.fetchPerson().subscribe(() => {
      this.form = new FormGroup({
        firstName: new FormControl('John'),
        surname: new FormControl('Doe'),
      });
      setTimeout(() => {
        this.form.disable();
        console.log(this.form);
      });
    });
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class PersonService {
  constructor(private http: HttpClient) {}

  public fetchPerson = () => this.http.get('https://randomuser.me/api');
}