Question

我想根据选择输入更改单个单选按钮。

例如，如果用户选择＆＃34;教授＆＃34;在选择输入中 - 然后他们已经使用的所有语言＆＃34;教学＆＃34;应该在单选按钮中禁用。如果用户选择＆＃34;学习＆＃34;然后他们已经使用了所有语言＆＃34;学习＆＃34;将被禁用。（所以他们只能挑选新的）

我将收到一份服务中所有语言+用户教学和学习语言的列表。现在我刚刚将它们创建为数组。

HTML

<form [formGroup]="addLanguageFormGroup">
    <mat-form-field class="">
        <mat-select placeholder="Type" class="full-width" formControlName="type">
            <mat-option value="teach">Teach / Native</mat-option>
            <mat-option value="learn">Learn</mat-option>
        </mat-select>
    </mat-form-field>
    <br>
    <label for="">Select a language</label>
    <br>
    <br>
    <mat-radio-group class="example-radio-group" formControlName="language" aria-label="language">
        <mat-radio-button class="example-radio-button" *ngFor="let language of languages" [value]="language"> {{language}}
        </mat-radio-button>
    </mat-radio-group>

</form>

TS

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  languages:any;
  addLanguageFormGroup: FormGroup
  teaching: any;
  learning: any;

  constructor(private formBuilder: FormBuilder,
  ) { }

  ngOnInit() {

    this.addLanguageFormGroup = this.formBuilder.group({
      type: ['', Validators.required],
      language: ['', Validators.required],

    });


    setTimeout((res) => {
      this.languages = ["Language1", "Language2", "Language3", "Language4", "Language5"];

      this.teaching = ["Language1"];

      this.learning = ["Language3"]
    });

  }


}

Answer 1

今天又走了之后，它比我想象的要简单得多。

首先，mat-select有一个更改指令，我们可以获取select输入的值。 https://material.angular.io/components/select/api

<mat-select (change)="changed($event)" placeholder="Type" class="full-width" formControlName="type">

获取此值后，我们可以将其绑定到类型变量，以便稍后在禁用某些单选按钮时使用。

type: any;

changed(v) {
   this.type = v.value;
}

然后，我们在mat-radio按钮中设置了一个禁用指令，指向我们处理单个单选按钮禁用的功能。此功能采用单选按钮的当前语言。

<mat-radio-button class="example-radio-button" *ngFor="let language of languages" [value]="language" [disabled]="isDisabled(language)"> {{language}}
</mat-radio-button>

最后，我们实现了isDisabled函数来首先识别类型（学习或教授）。然后我们检查传递给isDsiabled函数的当前语言是否在学习语言数组中。如果是，我们返回true以禁用它。我们做同样的教学过程。

  isDisabled(c) {

    if(this.type === "learn")
    {
      if(this.learning.indexOf(c) > -1) 
      {
        return true;
      }
    }

     if(this.type === "teach")
    {
      if(this.teaching.indexOf(c) > -1) 
      {
        return true;
      }
    }

    return false;
  }

请参阅更新的stackblitz https://stackblitz.com/edit/angular-qcr3lv?file=app/app.component.ts

如何根据选择输入操作单个单选按钮

1 个答案: