formArray bug

<!doctype html>

<html>

<head>
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="./lib/main.ts"></script>
</head>

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

</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule  } from '@angular/forms';
import { BookMovieComponent } from './bookMovie/bookMovie.component';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <p>Angular : Template Driven Form</p>
            <book-movie></book-movie>
        </div>
    `,
})
export class App {
    name: string;
    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }
}

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

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

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

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

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

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'book-movie',
  template: `<div class="container">
    <ng-container *ngFor="let group of form.controls">
      <div [formGroup]="$any(group)">
          <input formControlName="name"/>
      </div>
    </ng-container>
    <p *ngIf="form.pristine">formArray is pristine</p>
    <p *ngIf="!form.pristine">formArray is not pristine</p>
    <p *ngIf="form.controls[0].pristine">formGroup is pristine</p>
    <p *ngIf="!form.controls[0].pristine">formGroup is not pristine</p>
    <p *ngIf="form.controls[0].controls['name'].pristine">formControl is pristine</p>
    <p *ngIf="!form.controls[0].controls['name'].pristine">formControl is not pristine</p>
</div>`
})
export class BookMovieComponent implements OnInit {
  form = new FormArray([]);
  
  constructor() { }
  
  ngOnInit() {
      this.form.controls = [
        new FormGroup({
          name: new FormControl('testName')
        })
      ];
  }
}

export class Movie {
  constructor(
    public name: string,
    public cinemaHall: string,
    public timing: string) {
    
  }
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^7.0.0-rc.0",
        "@angular/compiler": "^7.0.0-rc.0",
        "@angular/core": "^7.0.0-rc.0",
        "@angular/platform-browser": "^7.0.0-rc.0",
        "@angular/platform-browser-dynamic": "^7.0.0-rc.0",
        "@angular/forms": "^7.0.0-rc.0",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}