Angular中独立于FormGroup的Select控件绑定更新问题求助

作为Angular新手，你遇到的核心问题有两个：一是独立Select与表单控件的绑定逻辑混淆，二是Materialize自定义Select组件和Angular表单控件的不同步。下面是一步步的清晰修复方案：

1. 重构组件逻辑：创建独立的选择控件 #

顶部的Select不属于任何一个表单，所以咱们单独给它创建一个FormControl，避免和表单内部的控件混淆：

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

@Component({
  selector: 'app-publish',
  templateUrl: './publish.component.html',
  styleUrls: ['./publish.component.css']
})
export class PublishComponent implements OnInit {
  // 独立管理Select选择的控件
  postTypeControl = new FormControl('instagram');
  instagramForm!: FormGroup;
  contentForm!: FormGroup;

  constructor(private fb:FormBuilder) {}

  ngOnInit(): void {
    this.initForms();
    this.initMaterializeComponents();
  }

  // 初始化两个表单（移除原本不属于它们的choice控件）
  private initForms() {
    this.instagramForm = this.fb.group({
      instaToken:[''],
      link:['']
    });
    this.contentForm = this.fb.group({
      contentToken:[''],
      content:['']
    });
  }

  // 初始化Materialize组件并同步Select值
  private initMaterializeComponents() {
    const selectElems = document.querySelectorAll('select');
    const selectInstance = M.FormSelect.init(selectElems)[0];

    // 监听Materialize Select的变化，同步到Angular的FormControl
    selectInstance.el.addEventListener('change', (e: Event) => {
      const target = e.target as HTMLSelectElement;
      this.postTypeControl.setValue(target.value);
    });

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

2. 更新模板：绑定独立控件并优化显示逻辑 #

把Select绑定到新创建的postTypeControl，并基于这个控件的值来控制表单显示：

<div class="row">
  <div class="col l6 s12 m12 offset-l3">
    <!-- 独立Select绑定到postTypeControl -->
    <div class="input-field col s12 white-text">
      <select [formControl]="postTypeControl">
        <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>

      <!-- 基于postTypeControl的值控制表单显示 -->
      <div [class.active]="postTypeControl.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]="postTypeControl.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">Selected Type: {{ postTypeControl.value }}</div>
  </div>
</div>

3. 额外优化建议 #

如果你觉得用[class.active]控制显示不够直观，可以换成Angular的*ngIf指令，这样更符合Angular的开发习惯：

<!-- 替换原本的[class.active]逻辑 -->
<div *ngIf="postTypeControl.value === 'instagram'" id="test1" class="col l12 white-text">
  <!-- Instagram表单内容 -->
</div>
<div *ngIf="postTypeControl.value === 'content'" id="test2" class="col l12 white-text">
  <!-- Content表单内容 -->
</div>

内容的提问来源于stack exchange，提问作者Padmesh