时间戳

首页 > 解决方案 > 反应中的mat-button-toggle组使其他控件消失？

angular - 反应中的mat-button-toggle组使其他控件消失？

问题描述

我已经构建了一个基本的反应式表单，但是当有 3 个文本字段和一个垫子按钮切换时。当我添加切换（下面模板中的最后一个表单）时，常规输入表单字段变得不可见。

没有切换，我得到这个：

模板和组件代码如下：

当我添加切换时，我得到了这个：

 <form [formGroup]="bindingAuthorForm" (submit)="submit()">
  <mat-form-field class="form-field" appearance="outline">
    <mat-label>Binding Name</mat-label>
    <input matInput placeHolder="1.0.0" formControlName="bindingName" required>
    <mat-error *ngIf="bindingAuthorForm.controls['bindingName'].hasError('pattern')">
      <span *ngIf="bindingAuthorForm.controls['bindingName'].errors['required']">This field is
        mandatory.</span>
      <span *ngIf="bindingAuthorForm.controls['bindingName'].errors['pattern']">Lowercase letters, numbers and
        underscore only.</span>
    </mat-error>
  </mat-form-field>
  <mat-form-field class="form-field" appearance="outline">
    <mat-label>Version</mat-label>
    <input matInput placeHolder="Version" formControlName="version" required>
    <mat-error *ngIf="bindingAuthorForm.controls['version'].hasError('pattern')">
      <span>Version must be Major.Minor.Patch style, e.g. '1.2.3'</span>
    </mat-error>
    <mat-error *ngIf="bindingAuthorForm.controls['version'].hasError('required')">
      <span>Version is required. </span>
    </mat-error>
  </mat-form-field>
  <mat-form-field class="form-field" appearance="outline">
    <mat-label>Author</mat-label>
    <input matInput placeHolder="Binding Author" formControlName="authorName" required>
    <mat-error *ngIf="bindingAuthorForm.controls['authorName'].hasError('required')">
      <span>Author Name is required. </span>
    </mat-error>
  </mat-form-field>
  
  When I add the below the fields above disappear:
  <mat-form-field class="form-field" appearance="outline">
    <mat-button-toggle-group formControlName="bindingType'">
      <mat-button-toggle value="definitions">Definitions</mat-button-toggle>
      <mat-button-toggle value="entitlements">Entitlements</mat-button-toggle>
    </mat-button-toggle-group>
  </mat-form-field>
</form>

BindingAuthorComponent.ts

import { Component, OnInit  } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-binding-author',
  templateUrl: './binding-author.component.html',
  styleUrls: ['./binding-author.component.scss']
})
export class BindingAuthorComponent implements OnInit {
  bindingAuthorForm : FormGroup;
  constructor(private formBuilder : FormBuilder  ) {   }
  bindingNameRegex :RegExp =  /^[a-z][a-z0-9_]*$/;
  versionNumberRegex : RegExp = /^\d+.\d+.\d+$/
  public foo : string = "I am foo"

  ngOnInit(): void {
    this.bindingAuthorForm = this.formBuilder.group({
      bindingName : [null, [Validators.required, Validators.pattern(this.bindingNameRegex), Validators.maxLength(9)]],
      version : [null, [Validators.required, Validators.pattern(this.versionNumberRegex)]],
      authorName : [null, [Validators.required]],
      bindingType : [""]
    })
  }
  submit() {
    if (!this.bindingAuthorForm.valid) {
      return;
    }
    console.log(this.bindingAuthorForm.value);
  }
}

标签： angularangular-material

解决方案

我不认为mat-button-toggle-group是兼容的mat-form-field。从按钮切换组中删除表单字段，你应该没问题。

推荐阅读