проблема с обновлением select formcontrol в привязке, которая находится за пределами formgroup

Question

Я использую Materialize CSS
У меня есть две формы, которые я назначил содержимому двух tabs 'test1' и 'test' , обе формам назначаются разные группы форм.
Я хочу выбрать одну форму в соответствии с выбором пользователя, указанным в раскрывающемся списке выбора от пользователя
Выпадающий список выбора отображается при запуске, за пределами обеих групп форм, значение которых должно быть обе формы доступны для отображения правильной формы с помощью директивы [class.active] для соответствующего содержимого вкладки

Пожалуйста, помогите мне, я новичок в Angular и не мог думать о предстоящем потоке.

publi sh .component. html

    <div class="row"> 
        <div class="col l6 s12 m12 offset-l3">



            <div class="input-field col s12 white-text">
                <select formControlName="choice">
                    <option value="instagram">Instagram post</option>
                    <option value="content">Content post</option>
                </select>
                <label>Choose type of post</label>
            </div>

            <div class="row">
                <div class="col l12" style="display: none;">
                    <ul class="tabs">
                        <li  class="tab col l6 disabled"><a href="#test1">Test 1</a></li>
                        <li  class="tab col l6 disabled"><a href="#test2">Test 2</a></li>
                    </ul>
                </div>
                <div [class.active]="instagramForm.get('choice').value === 'instagram' " id="test1" class="col l12 white-text">
                    <div class="row">
                        <form class="col s12" [formGroup]="instagramForm">
                            <div class="input-field">
                                <input id="instaToken" formControlName="instaToken" type="text" class="validate white-text">
                                <label for="instaToken">Access Token</label>
                            </div>
                            <div class="input-field">
                                <input id="link" formControlName="link" type="text" placeholder="Something like https://www.instagram.com/...." class="validate white-text">
                                <label class="active" for="link">Link to Instagram post</label>
                            </div>
                            <div class="btn-db center-align" type="submit">Submit</div>
                        </form>
                    </div>
                </div>

                <div [class.active]="instagramForm.get('choice').value === 'content' " id="test2" class="col l12 white-text">
                    <div class="row">
                        <form class="col s12" [formGroup]="contentForm">
                            <div class="input-field">
                                <input id="contentToken" formControlName="contentToken" type="text" class="validate white-text">
                                <label for="contentToken">Access Token</label>
                            </div>

                            <div class="input-field">
                                <textarea id="content" formControlName="content" class="materialize-textarea white-text"></textarea>
                                <label for="content">Your Content here</label>
                            </div>

                            <div class="btn-db center-align" type="submit">Submit</div>
                        </form>
                    </div>
                </div>
            </div>

<div class="white-text" style="font-size:1em">{{ instagramForm.value | json}}</div>

        </div>
    </div>
</div>

component.ts

import * as M from 'materialize-css';
declare var $:any;
import { FormBuilder,FormControl } from '@angular/forms';

@Component({
  selector: 'app-publish',
  templateUrl: './publish.component.html',
  styleUrls: ['./publish.component.css']
})
export class PublishComponent implements OnInit {

  constructor(private fb:FormBuilder) {}

  instagramForm = this.fb.group({
    choice:['instagram'],
    instaToken:[''],
    link:['']
  });

 contentForm = this.fb.group({
    choice:[''],
    contentToken:[''],
    content:['']
  });

  ngOnInit(): void {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems,"");


    $(document).ready(function(){
        $('.tabs').tabs();
    });
  }

}