Angular：在更改和设置字段值时禁用字段

Posted 2023-02-22

【中文标题】Angular：在更改和设置字段值时禁用字段

【英文标题】：Angular: disable field on change and set value of field

【发布时间】：2022-01-19 09:19:26

【问题描述】：

我有一个表，我需要在其中呈现数据库值，然后在用户更改后我需要提交该表单。这里是demo

我需要像这样申请， 如果状态为“已消除”或“缺席”，则需要禁用排名下拉菜单，排名将为 null/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 class="table-responsive competition_wrapper">
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <table
      class="
        bordered
        border-top-0
        table
        dark
        shadow_none
        w-100
        mb-3
        competition_result_table
      "
    >
      <thead>
        <tr>
          <th  colspan="6">Competition Name</th>
        </tr>
      </thead>
      <tbody formArrayName="checklist">
        <tr class="table_sub_heading">
          <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 class="select_wrapper form-group mb-0">
              <select
                class="form-control"
                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 class="select_wrapper form-group mb-0">
              <select class="form-control" 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 class="form-group mb-0">
              <textarea
                type="text"
                class="form-control"
                formControlName="comment"
              ></textarea>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <button class="btn">Add Result</button>
  </form>
</div>

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

【参考方案1】：

你列举了大量的点，因为这不是一个免费的代码提供者应用程序，我不会解决所有问题，至少，直到你尝试做点什么。

话虽如此，我创建了一个demo，它解决了我看到您尝试但无法完成的第一个问题。您无法禁用排名字段，因为：

首先，您在 onchange 函数中传递的事件不是您想要的。您需要事件的价值，即便如此，您也需要提取对您很重要的信息，即 id。 其次，您试图禁用/启用不存在的东西。控制台给了你关于它的错误。 this.myForm.controls['rank'] 未定义。

关于步骤 n.4，您可能需要收听排名formcontrol 并从下一个竞争对手的排名下拉列表中隐藏所选选项。希望这能给您解决问题的提示。

【讨论】：

很抱歉问了很多点。感谢您的帮助和指导。我已经在我尝试过的部分编辑了我的问题。我检查了你的解决方案。它的禁用等级但从结果中也被删除。我们能以某种方式到达 'null' 或 0 吗？

我认为这只是在禁用排名时将值设置为 null 的问题。

我试过(this.formChecklist.controls[index] as FormGroup).controls[ 'rank' ].setValue(0);，但禁用后，排名属性被删除，所以它没有显示在<pre> myForm.value | json </pre>

我已经更新了演示。发生这种情况是因为表单控件被禁用，因此该值不会显示在表单的值中。这是有道理的。反正如果你不需要这个值（null），以后不发到后端也没问题。