从禁用的输入设置 Angular Reactive 表单的值答案

【问题标题】：Setting values of Angular Reactive form from disabled inputs从禁用的输入设置 Angular Reactive 表单的值
【发布时间】：2020-10-08 15:41:54
【问题描述】：

我的问题是我的反应式表单中有 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"
    }
  ]
}

【问题讨论】：

您可以使用 getRawValue() 方法获取整个表单数据以及禁用的表单项
不知道怎么用的可以参考这个博客：angular.io/api/forms/FormGroup#getRawValue
你在寻找什么事件，你想在哪里获得禁用的表单值？
实际上我只是希望我的表单能够识别我使用函数设置的名字和姓氏值，就像用户在输入中输入一样。由于 formControlName 指令，这些值与表单相关联。当我在这些输入中输入一些东西时它完全可以工作，但当我用函数在其中设置一个值时它就不行了。

标签： angular angular-reactive-forms disabled-input

【解决方案1】：

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

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

并将其用作函数的参数来设置students的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()">

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

【讨论】：