Angular - 如何将按钮标签值添加到 FormGroup答案

【问题标题】：Angular - How to add button label value to FormGroupAngular - 如何将按钮标签值添加到 FormGroup
【发布时间】：2020-11-08 00:24:07
【问题描述】：

我正在实现一个联系表单，其中包含输入和下拉选择。对于下拉菜单，我使用的是 ng-Bootstrap 库，所以我有一个按钮以及下拉菜单和下拉项目。但是结合 Angular 和 FormGroup，很难给它添加按钮标签值。任何人都可以就如何解决它提供建议吗？提前致谢！

HTML 文件中的代码 sn-p：

<div class="form-group">
                <label class="input-label" for="topicDropdown">Your Topic</label>
                <div ngbDropdown id="topicDropdown">
                    <button class="btn btn-label btn-block btn-outline-secondary" id="topic" ngbDropdownToggle><span class="float-left">{{ selectedCategory }}</span>
                    </button>
                    <div ngbDropdownMenu class="w-100">
                      <a ngbDropdownItem *ngFor="let category of categories;" id="{{category.toLowerCase()}}DropdownItem"
                        name="categoryDropdown" (click)="onCategorySelection(category)"><span class="btn-label">{{ category }}</span></a>
                    </div>
                </div>       
            </div>

.ts 文件中的函数，我希望按钮标签或 selectedCategory 变量可以是 FormGroup 的一部分。

private setUpValidationForm(){
    this.contactForm = new FormGroup({
      email: new FormControl("", [
        Validators.required,
        Validators.email
      ]),
      firstname: new FormControl("", [
        Validators.required
      ]),
      lastname: new FormControl("", [
        Validators.required
      ]),
      topic: new FormControl(), // This is not working..
      message: new FormControl("", [
        Validators.required
      ])
    });
  }

【问题讨论】：

你到底有什么不能做的？
我想将 selectedCategory 的值添加到 FormGroup，或者 ID 为“topic”的按钮应该在 FormGroup 中
stackoverflow.com/a/42105482/4743730

标签： javascript html angular

【解决方案1】：

请参阅下面的方法，您会在值更改时更新表单

    <div class="form-group">
        <label class="input-label" for="topicDropdown">Your Topic</label>
        <div ngbDropdown id="topicDropdown">
            <button class="btn btn-label btn-block btn-outline-secondary" id="topic" ngbDropdownToggle><span class="float-left">{{ this.contactForm.get('topic').value ? this.contactForm.get('topic').value : 'Select Value' }}</span>
                    </button>
            <div ngbDropdownMenu class="w-100">
                <a ngbDropdownItem *ngFor="let category of categories;" id="{{category.toLowerCase()}}DropdownItem"
                    name="categoryDropdown"
                    (click)="this.contactForm.get('topic').setValue(category)"><span class="btn-label">{{ category }}</span></a>
            </div>
        </div>
    </div>

See this Link 到这个解决方案

【讨论】：