Angular: 在更改时禁用字段并设置字段值
Angular: disable field on change and set value of field
我有一个 table,我需要在其中呈现数据库值,然后在用户更改后我需要提交该表单。这里是demo
我需要像这样申请,
如果状态为 'eliminated' 或 'absent',则需要禁用排名下拉菜单,排名将为 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 width="150" 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>
您列举了很多要点,因为这不是免费的代码提供程序应用程序,所以至少在您尝试做一些事情之前,我不会解决所有问题。
也就是说,我创建了一个 demo 来解决第一个问题,我看到您尝试过但无法完成。您无法禁用排名字段,因为:
- 首先,您在 onchange 函数中传递的事件不是您想要的。您需要事件的价值,即便如此,您还需要提取对您来说很重要的信息,即 ID。
- 其次,您正在尝试 disable/enable 一些不存在的东西。控制台给你关于它的错误。 this.myForm.controls['rank'] 未定义。
关于第 n.4 步,您可能需要收听排名 formcontrol 并从下一个竞争对手的排名下拉列表中隐藏所选选项。希望这能给你解决问题的提示。
我有一个 table,我需要在其中呈现数据库值,然后在用户更改后我需要提交该表单。这里是demo
我需要像这样申请, 如果状态为 'eliminated' 或 'absent',则需要禁用排名下拉菜单,排名将为 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 width="150" 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>
您列举了很多要点,因为这不是免费的代码提供程序应用程序,所以至少在您尝试做一些事情之前,我不会解决所有问题。
也就是说,我创建了一个 demo 来解决第一个问题,我看到您尝试过但无法完成。您无法禁用排名字段,因为:
- 首先,您在 onchange 函数中传递的事件不是您想要的。您需要事件的价值,即便如此,您还需要提取对您来说很重要的信息,即 ID。
- 其次,您正在尝试 disable/enable 一些不存在的东西。控制台给你关于它的错误。 this.myForm.controls['rank'] 未定义。
关于第 n.4 步,您可能需要收听排名 formcontrol 并从下一个竞争对手的排名下拉列表中隐藏所选选项。希望这能给你解决问题的提示。