时间戳

首页 > 解决方案 > 带单选按钮的材料芯片

angular - 带单选按钮的材料芯片

问题描述

我目前正在研究角材料。面对一个我想用单选按钮制作材料芯片的情况。

我想获取类似 [{text: 'abc', code: 0 }, ...] 的数据

我到目前为止所尝试的如下。如果需要更多信息，请告诉我。

.ts 文件 

myForm: FormGroup;
  arr: FormArray;

  constructor(private _fb: FormBuilder) {
    this.myForm = this._fb.group({
      arr: this._fb.array([this.createItem()])
    })
  }

  createItem() {
    return this._fb.group({
      name: [null],
      code: [null]
    })
  }

  getValue() {
    console.log(this.myForm.get('arr').value)
  }

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || '').trim()) {
      this.arr = this.myForm.get('arr') as FormArray;
      this.arr.push(this.createItem());
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

HTML

<div>
  <form action="" [formGroup]="myForm">
    <mat-form-field class="example-chip-list" formArrayName="arr" *ngFor="let a of myForm.get('arr').controls; let i = index">
      <div [formGroupName]="i">
          <mat-chip-list #chipList>
    <mat-chip [selectable]="selectable"
             [removable]="removable" (removed)="remove(a)">
      {{a.get('name').value}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      <mat-radio-group aria-label="Select an option" formControlName="code">
        <mat-radio-button value="1">1</mat-radio-button>
        <mat-radio-button value="2">2</mat-radio-button>
      </mat-radio-group>
    </mat-chip>
    <input formControlName="name"
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
      </div>
</mat-form-field>
  </form>
  <button (click)="getValue()">submit</button>
</div>

无法得到想要的结果。找不到前进的方向。提前致谢

标签： angularangular-material-6

解决方案

至少可以说这是“非常规”，但问题是您的名称控件实际上需要存在于表单数组之外，因为它不属于数组中的每个项目：

  <form action="" [formGroup]="myForm">
    <mat-form-field class="example-chip-list">
      <mat-chip-list #chipList>
        <ng-container formArrayName="arr"> <!-- array here -->
          <mat-chip  *ngFor="let a of arr.controls; let i = index"
             [selectable]="selectable"
             [removable]="removable" 
             (removed)="remove(a)" 
             [formGroupName]="i"> <!-- ngFor and group here -->
            {{a.get('text').value}} <!-- show text control value -->
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            <mat-radio-group aria-label="Select an option" formControlName="code">
              <mat-radio-button value="1">1</mat-radio-button>
              <mat-radio-button value="2">2</mat-radio-button>
            </mat-radio-group>
          </mat-chip>
        </ng-container>
        <input formControlName="name"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
    </mat-form-field>
  </form>

然后修改您的组件：

  constructor(private _fb: FormBuilder) {
    this.myForm = this._fb.group({
      name: [''], // add name control here
      arr: this._fb.array([]) // init empty
    })
  }


  createItem(text) { // change this to have text ctrl and accept value
    return this._fb.group({
      text: [text], // set value
      code: [null] // optional to add default val here
    })
  }

  get arr() { // handy helper
    return this.myForm.get('arr') as FormArray;
  }

  add(event: MatChipInputEvent): void {
    const value = event.value;

    if ((value || '').trim()) {
      this.arr.push(this.createItem(value)); // feed in the value
    }

    // Reset the input value for the reactive form
    this.myForm.get('name').setValue('');
  }

这是您的删除功能的样子：

remove(i: index) {
  this.arr.removeAt(i);
}

并在您的模板中，使用索引调用它：

(removed)="remove(i)"

推荐阅读