Установка значений 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» студента:

Что я хочу получить, если введу правильный идентификатор студента:

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

Answer 1

Итак, я наконец нашел решение своей проблемы.

В моем предыдущем коде я получал значение этого ввода: <input type="text" class="form-control" placeholder="Identifiant" required formControlName="id" list="id" #ref>

и использовал его как параметр функции для установки имени и фамилии ввода значения из студентов записи <input type="text" class="form-control" name="firstname" formControlName="firstname" [value]="findStudentFirstName(ref.value)" required [attr.disabled]="true">

, но это не так изменение значения в форме (только фактическое входное значение) ... поэтому я создаю новую функцию и удаляю остальные из моих входных данных lastname и firstname:

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

И таким образом он фактически изменяет как значение во вводе, так и значение в форме.