На основе arraySize, определяя различные formControlName внутри ngFor и обновляя эти поля на основе пользовательского ввода - PullRequest
Новая
       24

На основе arraySize, определяя различные formControlName внутри ngFor и обновляя эти поля на основе пользовательского ввода

0 голосов
/ 08 июля 2019

У меня есть массив, в котором есть некоторые элементы, которые будут меняться. Мне нужно создать форму, выбирая эти значения. А также необходимо обновить эти поля в массиве, если пользователь вносит некоторые изменения в форму.

Я попытался указать индекс в ngFor и использовать его для определения другого FormControlName

массив 

"Sensor": [
                    {
                        "ID": "FEDBFBAB62B02275-00",
                        "Name": "Apt-4E", 
                        "TargetTemp": 25, 
                        "Battery": 95,
                        "SpaceAvg": False,
                        "Building": True 
                    },
                    {
                        "ID": "FEDBFBAB62B02276-00",
                        "Name": "Apt-5E", 
                        "TargetTemp": 26, 
                        "Battery": 55,
                        "SpaceAvg": False,
                        "Building": True 
                    }
]

.html файл 

<tr *ngFor="let data of sensor;let idx=index">
                <td>{{ data.ID }}</td>
                <td><input type="text" value={{data.Name}} formControlName="name{{idx+1}}"></td>
                <td><input type="radio" id="test3"  formControlName="location{{idx+1}}" value="true" [checked]="location1">
                    <label for="test3">Valve 1</label>&nbsp;&nbsp;
                    <input type="radio" id="test4"  formControlName="location{{idx+1}}" value="false" [checked]="!location1">
                    <label for="test4">Valve 2</label>
                  </td>
                <td><input type="number" value={{data.TargetTemp}} formControlName="spaceAvg{{idx+1}}"></td>
            </tr>

.ts file 

export class Screen7Component implements OnInit{

    sensor: any[];
    id1 : string;
    id2 : string;
    name1 : string;
    name2 : string;
    location1 : boolean;
    location2 : boolean;
    spaceAvg1 : number;
    spaceAvg2 : number;

    Screen7Config = new FormGroup({
        name1 : new FormControl(''),
        name2 : new FormControl(''),
        location1 : new FormControl(''),
        location2 : new FormControl(''),
        spaceAvg1 : new FormControl(''),
        spaceAvg2 : new FormControl('')
    });
}

Но проблема в том, что мне нужно явно объявить имена переменных в файле .ts, но если содержимое массива динамическое, мы не можем этого сделать. А также свойство [флажок] также не работает, когда мы даем
[проверено] = "{{location {{idx + 1}}".

Я думаю, что нам нужно использовать FormArray, но я не знаю, как получить и установить значения без явного определения formControls. Пожалуйста, помогите!

...