以角度反應形式顯示條件輸入框

Question

我正在制作 angular 6 應用程序，其中我使用的是 angular 反應形式。

網址：

<form [formGroup]="form">

    <h2>Click the add button below</h2>
    <button (click)="addCreds()">Add</button>
        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
          <div [formGroupName]="i" style="display: flex">
            <select (ngModelChange)="changeAction($event)" formControlName="action">
              <option *ngFor="let option of options" value="{{option.key}}"> {{option.value}} </option>
            </select>
            <input placeholder="Name" formControlName="name">
            <div *ngIf="showLabel">
            <input placeholder="Label" formControlName="label">
            </div>
          </div>
        </div>

    </form>

    <pre>
      {{ form ?.value | json }}
    </pre>

:

  form: FormGroup;
  showLabel: boolean = false;

  options : any = [ 
    { "key" : "set", "value": "Set" },
    { "key" : "wait", "value": "Wait" },
    { "key" : "go", "value": "Go" }   
    ]

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      action: '',
      name: '',
      label: ''
    }));
  }

  changeAction(e) {
    if(e === "set" || e === "go") {
      this.showLabel = true;
    } else {
      this.showLabel = false;
    }
  }

工作堆棧閃電戰： https ://stackblitz.com/edit/angular-form-array-example-yksojj

在這個給定的示例中，將有一個添加按鈕，單擊該按鈕后，您將獲得一個select-box ，其值為set,wait,go和一個名為 name 的輸入。單擊添加按鈕后，將添加同一行並形成表單數組內的每個對象。

您還可以在 html 中看到一個if條件作為標簽，

<div *ngIf="showLabel">
  <input placeholder="Label" formControlName="label">
</div>

我需要的東西是在選擇框中，如果我選擇set 或 go然后標簽需要顯示，否則它不應該顯示我寫過的，

  changeAction(e) {
    if(e === "set" || e === "go") {
      this.showLabel = true;
    } else {
      this.showLabel = false;
    }
  }

足夠清楚如果用戶點擊三次添加按鈕，那么下拉和名稱字段需要單獨顯示三次，而如果用戶從下拉列表中選擇值作為設置或去那么標簽輸入需要顯示到該特定單獨行，其中下拉設置了值並轉到.. 如果選擇是wait那么下拉值為wait的行不應該有標簽框。

請幫助我達到預期的結果..

Answer 1

如果您將 disabled:true 屬性添加到 formControl 它將從 formGroup 中排除 fromControl 然后您可以手動啟用 formControl

creds.push(this.fb.group({
      action: '',
      name: '',
      label: {disabled:true, value: ""}
    }));

然后使用啟用方法啟用

changeAction(e,index) {
    if(e === "set" || e === "go") {
      this.showLabel = true;     
     this.form.get('credentials').at(index).get('label').enable();

    } else {
      this.showLabel = false;
      this.form.get('credentials').at(index).get('label').disable();
    }
  }

示例： https : //stackblitz.com/edit/angular-form-array-example-5buwyr

Answer 2

this.showLabel

此變量的范圍是您的整個組件。 因此，打開或關閉它會顯示和隱藏所有輸入。

您需要一個每行值（界面中的creds.showLabel ），或者在您的模板中使用它：

*ngIf="['set','go'].includes(creds.action)"

更新的 Stackblitz

順便說一句，這個：

changeAction(e) {
    if(e === "set" || e === "go") {
      this.showLabel = true;
    } else {
      this.showLabel = false;
    }
  }

這樣寫更優雅：

changeAction(e) {
    this.showLabel = ['set','go'].includes(e)
}

或者這樣：

changeAction(e) {
    this.showLabel = e in ['set','go']
}

Answer 3

好吧， Jeremy 的回答非常好，並且強制使用平台/語言提供的大多數本機 api，但是，這是一種傳統方法來了解對象的實際流和范圍等，等等......

根本原因：顯示隱藏字段對組件范圍是全局的，而不是在每個formgroup級別。 因此，更改單個值並用於所有人，將影響所有人。

解決方案：

1. 使用Jeremy 的答案進行干凈的編碼和不易出錯的代碼。

2. 管理一組變量，這些變量將處理每個表單組的顯示/隱藏詳細信息。

在下面的答案中，添加了一些易於理解的注釋，並添加了 console.log 以查看到底發生了什么。 此外，還使用了i在*ngFor創建的索引，並展示了您將來如何使用這些東西。

 import { Component } from '@angular/core'; import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: 'app.component.html', }) export class AppComponent { form: FormGroup ; showLabel = []; creds : FormArray; options : any = [ { "key" : "set", "value": "Set" }, { "key" : "wait", "value": "Wait" }, { "key" : "go", "value": "Go" } ] constructor(private fb: FormBuilder) { this.form = this.fb.group({ credentials: this.fb.array([]), }); this.creds = this.form.controls.credentials as FormArray; } addCreds() { this.creds.push(this.fb.group({ action: '', name: '', label: '' })); // every time adding new foem grp, adding lable show/hide data also. this.showLabel.push(false); } changeAction(e, i) { //every time input clikced, managing show/hide for that particular data also console.log("iii", i, e.target.value); if( e.target.value == "set" || e.target.value == "go") { this.showLabel[i] = true; } else { this.showLabel[i] = false; } } }

 <form [formGroup]="form"> <h2>Click the add button below</h2> <button (click)="addCreds()">Add</button> <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index"> <div [formGroupName]="i" > <select (change)="changeAction($event, i)" formControlName="action"> <option *ngFor="let option of options" value="{{option.key}}"> {{option.value}} </option> </select> <input placeholder="Name" formControlName="name"> <div *ngIf="showLabel[i]"> <input placeholder="Label" formControlName="label"> </div> </div> </div> </form> <pre> {{ form ?.value | json }} </pre>

查看實時 stackblitz 工作代碼

注意：這里的意思是傳統的……就像我們每次都做的那樣，即自己處理我們的問題並創造我們要解決的新問題。 這不是傳統。 :P

Answer 4

請不要使用(ngModelChange)或changeAction($event)來獲取數組中控件的值 - ngModelChange ， ngModelChange用於模板驅動的表單，而不是ngModelChange式表單。

首先改變你的形式，使用隨一個div形式formArrayName="credentials" ，和內部div *ngFor="let creds of form.get('credentials')控制

    <!--a div with formArrayName--->
    <div formArrayName="credentials" >
      <!--a div *ngFor over "controls", in this div don't forget formGroupName-->
      <div *ngFor="let creds of form.get('credentials').controls; let i = index" 
          [formGroupName]="i" style="display: flex">
          <select formControlName="action">
             <option *ngFor="let option of options" value="{{option.key}}">
               {{option.value}} 
             </option>
          </select>
          <input placeholder="Name" formControlName="name">
          <div *ngIf="??????????????">
             <input placeholder="Label" formControlName="label">
          </div>
      </div>
    </div>

嗯，現在條件。 要獲得“行動”的價值，您可以使用

form.get('credentials').at(i).value.action
//or, better
creds.value.action

所以，你的 div 變得像

<div *ngIf="creds.value.action=='set' ||
      creds.value.action=='go'">
  <input placeholder="Label" formControlName="label">
</div>

這種方法避免了 .ts 中不必要的代碼。