代码之家 › 专栏 › 技术社区 › Suryan

带单选按钮的材料碎片

angular-material-6 angular

0

Suryan · 技术社区 · 6 年前

我目前正在研究角材料。我想用单选按钮制作材料芯片。

我想得到一些数据,比如[{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>

无法获得所需的结果。找不到前进的道路。提前谢谢

1 回复 | 直到 6 年前

1

bryan60 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函数的外观:

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

在模板中,使用索引调用它:

(removed)="remove(i)"