从禁用输入设置角响应形式的值
我的问题是，在我的反应性表单中有两个禁用的输入，但是我希望我的表单仍然得到它们的值。它们有值，因为它们是用函数设置的: findStudentLastName() findStudentFirstName()，它接受输入<input type="text" class="form-control" placeholder="Identifiant" required formControlName="id" list="id" #ref>的值。
希望你能帮我。
这里是我表格的一部分：
<div formArrayName="students">
<div style="margin-top:5px; margin-bottom:5px;"
*ngFor="let student of classForm.get('students')['controls']; let i=index">
<hr>
<legend>
<h4>Etudiant(e) {{i+1}} :</h4>
</legend>
<fieldset>
<div [formGroupName]="i">
<button type="button" class="btn btn-danger float-right" style="margin-top:32px;"
(click)="deleteStudent(i)">
<i class="fas fa-trash-alt" style="font-size: 20px;" aria-hidden="true"></i>
</button>
<div class="form-group form-row">
<div class="col-md-4 mb-3">
<label>Identifiant</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Identifiant" required
formControlName="id" list="id" #ref>
<datalist id="id">
<option *ngFor="let idS of studentsArr | keyvalue" value="{{idS.key}}"></option>
</datalist>
</div>
</div>
<div class="col-md-4 mb-3">
<label>First name</label>
<input type="text" class="form-control" name="firstname" formControlName="firstname" [value]="findStudentFirstName(ref.value)" required [attr.disabled]="true">
</div>
<div class="col-md-4 mb-3">
<label>Last name</label>
<input type="text" class="form-control" name="lastname" formControlName="lastname" [value]="findStudentLastName(ref.value)" required [attr.disabled]="true">
</div>
</div>
</div>
</fieldset>
</div>
</div>这里是我的TS的一部分：
data = {
name: "",
students: [
{
id: "",
firstname: "",
lastname:""
}
]
}
studentsArr: Record <string, [string, string]> = {
jhdoe: ["Jhon","DOE"],
jadoe: ["Jane","DOE"],
adurand: ["Albert","DURAND"]
}
findStudentFirstName(id: string):string {
if(this.studentsArr[id] != undefined) {
return this.studentsArr[id][0];
}
}
findStudentLastName(id: string):string {
if(this.studentsArr[id] != undefined) {
return this.studentsArr[id][1];
}
}
constructor(private fb: FormBuilder) {
this.classForm = this.fb.group({
name: ['', Validators.required],
students: this.fb.array([])
})
this.setStudents();
}
setStudents() {
let control = <FormArray>this.classForm.controls.students;
this.data.students.forEach(x => {
control.push(this.fb.group({
id: x.id,
firstname: x.firstname,
lastname: x.lastname
}))
})
}
addNewStudent() {
let control = <FormArray>this.classForm.controls.students;
control.push(
this.fb.group({
id: ['', Validators.required],
firstname: ['', Validators.required],
lastname: ['', Validators.required]
})
)
$('.toastS').toast('show');
$(document).ready(function () { $(document).scrollTop($(document).height()) });
}当我输入正确的学生身份时，我得到了什么：
当我输入正确的学生"id“时，我想要的是：
{
"name": "",
"students": [
{
"id": "jadoe",
"firstname": "Jane",
"lastname": "DOE"
}
]
}回答 1
Stack Overflow用户
发布于 2020-06-19 09:35:16
所以我最终找到了解决我的问题的方法。
在我之前的代码中，我得到了这个输入的值：<input type="text" class="form-control" placeholder="Identifiant" required formControlName="id" list="id" #ref>
并使用它作为函数的参数来设置_‘_
但它并没有改变表单中的值(只有实际的输入值).因此，我创建了一个新函数，并从我的姓氏和名字输入中删除其他函数：
applyNames() {
const formLines = this.classForm.get('students') as FormArray;
formLines.controls.forEach(control => {
control.get('firstname').setValue(this.findStudentFirstName(control.get('id').value));
control.get('lastname').setValue(this.findStudentLastName(control.get('id').value))
});
}并在第一个输入中使用它：<input type="text" class="form-control" placeholder="Identifiant" required formControlName="id" list="id" (input)="applyNames()">
这样，它实际上改变了输入中的值和形式中的值。
https://stackoverflow.com/questions/62452413
复制相似问题
腾讯云开发者
