Angular 禁用输入的反应形式的设置值

Question

我的问题是我的反应式表单中有 2 个禁用的输入，但我希望我的表单仍能获得它们的值。它们具有值，因为它们是用函数设置的：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" 学生时得到的结果：

当我输入一个正确的学生时我想要的是什么"id" :

{
  "name": "",
  "students": [
    {
      "id": "jadoe",
      "firstname": "Jane",
      "lastname": "DOE"
    }
  ]
}

Answer 1

所以我终于找到了解决问题的方法。

在我之前的代码中，我得到了这个输入的值：<input type="text" class="form-control" placeholder="Identifiant" required formControlName="id" list="id" #ref>

并将其用作函数的参数来设置 firstname 和 lastname 输入 value 名学生 条目 <input type="text" class="form-control" name="firstname" formControlName="firstname" [value]="findStudentFirstName(ref.value)" required [attr.disabled]="true">

但它并没有更改表单中的值（仅更改实际输入值）...所以我创建了一个新函数并从我的姓氏和名字输入中删除了其他函数：

    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()">

这样它实际上改变了输入中的值和表单中的值。

Angular 禁用输入的反应形式的设置值

Setting values of Angular Reactive form from disabled inputs

disabled-input

angular

angular-reactive-forms