Angular：在更改時禁用欄位并設定欄位值

我有一個表，我需要在其中呈現資料庫值，然后在用戶更改后我需要提交該表單。這是演示

我需要在那里申請，如果狀態為“已消除”或“缺席”，則需要禁用排名下拉串列，排名將為空/0。

我能夠呈現詳細資訊并嘗試更改狀態以禁用排名，但它不起作用。

請幫助和指導。謝謝。

Ts

import { Component } from '@angular/core';
import {
  AbstractControl,
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { merge } from 'rxjs';
import { takeWhile, tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  myForm!: FormGroup;
  rankArray = [];
  rankStatusArray: any = [
    { id: 'participated', name: 'Participated' },
    { id: 'eliminated', name: 'Eliminated' },
    { id: 'absent', name: 'Absent' },
  ];
  checklist = [
    {
      id: 13,
      rank: 3,
      horse_id: 86,
      horse_name: 'test232 fdfgdg',
      life_number: null,
      country: 'Afghanistan',
      result_status: 'participated',
      comment: 'my comment',
    },
    {
      id: 12,
      rank: null,
      horse_id: 87,
      horse_name: 'test horse',
      life_number: '234234',
      country: 'Algeria',
      result_status: null,
      comment: null,
    },
    {
      id: 11,
      rank: null,
      horse_id: 88,
      horse_name: 'tesdfs',
      life_number: null,
      country: 'Afghanistan',
      result_status: null,
      comment: null,
    },
    {
      id: 10,
      rank: null,
      horse_id: 94,
      horse_name: 'nam horse',
      life_number: 'fh345',
      country: 'India',
      result_status: null,
      comment: null,
    },
  ];

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      checklist: this.fb.array([]),
    });
    this.populate();
  }

  ngOnInit(): void {
    this.rankArray = Array(4)
      .fill(1)
      .map((x, i) => i   1);
  }

  get formChecklist() {
    return this.myForm.get('checklist') as FormArray;
  }

  populate() {
    this.checklist.forEach((x) => {
      this.formChecklist.push(
        this.fb.group({
          participantId: x.id,
          rankStatus: x.result_status,
          rank: x.rank,
          comment: x.comment,
          horse_name: x.horse_name,
          country: x.country,
          life_number: x.life_number,
        })
      );
    });
  }

  onChange(event) {
    console.log(event);
    if (event == 'eliminated' || event == 'absent') {
      this.myForm.controls['rank'].disable();
    } else {
      this.myForm.controls['rank'].enable();
    }
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

HTML

<div >
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <table
      
    >
      <thead>
        <tr>
          <th width="150" colspan="6">Competition Name</th>
        </tr>
      </thead>
      <tbody formArrayName="checklist">
        <tr >
          <td>Status</td>
          <td>Rank</td>
          <td>Participant Name</td>
          <td>Country</td>
          <td>Life Number</td>
          <td>Comment</td>
        </tr>
        <tr
          *ngFor="let item of formChecklist.controls; let i = index"
          [formGroupName]="i"
        >
          <td>
            <div >
              <select
                
                formControlName="rankStatus"
                (ngModelChange)="onChange($event)"
              >
                <option [ngValue]="null">Select</option>
                <option
                  *ngFor="let status of rankStatusArray"
                  [ngValue]="status.id"
                >
                  {{ status.name }}
                </option>
              </select>
            </div>
          </td>
          <td>
            <div >
              <select  formControlName="rank">
                <option value="null">Select</option>
                <option *ngFor="let rankno of rankArray" [value]="rankno">
                  {{ rankno }}
                </option>
              </select>
            </div>
          </td>
          <td>{{ item.get('horse_name').value }}</td>
          <td>
            {{ item.get('country').value }}
          </td>
          <td>
            {{ item.get('life_number').value }}
          </td>
          <td>
            <div >
              <textarea
                type="text"
                
                formControlName="comment"
              ></textarea>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <button >Add Result</button>
  </form>
</div>

<pre>{{ myForm.value | json }}</pre>

uj5u.com熱心網友回復：

您列舉了很多要點，而且由于這不是免費的代碼提供程式應用程式，因此至少在您嘗試做某事之前，我不會解決所有問題。

話雖如此，我創建了一個演示來解決我看到您嘗試過但無法完成的第一個問題。您無法禁用排名欄位，因為：

• 首先，您在onchange函式中傳遞的事件不是您想要的。您需要事件的值，即便如此，您還需要提取對您很重要的資訊，即 id。
• 第二，你試圖禁用/啟用不存在的東西。控制臺給了你關于它的錯誤。this.myForm.controls['rank']未定義。

關于步驟 n.4，您可能需要聆聽排名表單控制元件并從下一個競爭對手的排名下拉串列中隱藏所選選項。希望這能給你一個解決問題的提示。

標籤：有角的 形式 变化中 提交时 angular2-form-validation

上一篇：我輸入后輸入失去焦點

下一篇：Django：如何使表單有條件？