如何根據選擇輸入操縱單個單選按鈕

我想要更改要禁用的單個單選按鈕，具體取決於選擇輸入。如何根據選擇輸入操縱單個單選按鈕

例如，如果用戶在選擇輸入中選擇「示教」 - 那麼應該在單選按鈕中禁用他們已經「示教」的所有語言。如果用戶選擇「學習」，則他們已經「學習」的所有語言將被禁用。（所以他們只能挑新的）

我會收到一份所有語言+用戶的教學和學習語言列表。現在我剛剛將它們創建爲一個數組。

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>

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"] 
    }); 

    } 


}

來源

2017-10-16 KHAN

什麼是你的數據的確切形式？ – agriboz

在此示例中提供的方式 – KHAN

請停止讓人們更新某個外部網站以向您顯示其答案。這不是Stack Overflow的工作原理。代碼出現在你的問題和網站上的答案*上，而不是在外部代碼託管平臺上。 – meagar

有另一個今天后走，它比我想象的要簡單得多。

首先，mat-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-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

來源

2017-10-23 13:05:38 KHAN

如何根據選擇輸入操縱單個單選按鈕

回答

相關問題