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>

並將其用作 function 的參數來設置學生條目的名字和姓氏輸入值<input type="text" class="form-control" name="firstname" formControlName="firstname" [value]="findStudentFirstName(ref.value)" required [attr.disabled]="true">

但它並沒有改變表單中的值（只有實際輸入值）......所以我創建了一個新的 function 並從我的姓氏和名字輸入中刪除其他人：

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

通過這種方式，它實際上改變了輸入中的值和表單中的值。