Угловая 2/4 - Почему при привязке переключателя [значение] к объекту или функции это значение реактивной формы не обновляется? - PullRequest
0 голосов
/ 19 сентября 2018

* ПРИМЕЧАНИЕ: если у кого-то есть лучший способ сделать это, у меня все уши.

Я пытаюсь создать форму с тремя переключателями - два со статическим значением и одинс пользовательским, сгенерированным пользователем значением.Вот что происходит:

У меня по умолчанию установлено значение один: default set to one

Когда я нажимаю два, все работает как положено:

when I click two

Когда я нажимаю настраиваемую радиокнопку, все работает должным образом:

when I click three

Когда явведите значение, объект корректно видоизменится, но значение формы (которое установлено на один из ключей объекта) не обновляется:

form value doesn't update when I enter a value in input

Я могу вернуться к двум и получить ожидаемое поведение:

when I click back to two I see expected behavior

И когда я затем вернусь к трем, я увижу ожидаемое поведение:

when I click back to three, I see expected behavior

Вот мой код:

test.html

<form [formGroup]="myForm" novalidate>
    <label for="every_fifteen_minutes">
        <input id="two" type="radio" formControlName="test" value="one">
        <span class="input_text">This [value] will always be one</span>
    </label>
    <label for="two">
        <input id="two" type="radio" formControlName="test" value="two">
        <span class="input_text">This [value] will always be two</span>
    </label>
    <label for="three">
        <input id="three" type="radio" formControlName="test" [(value)]="myObj.strKey">
        <span>This [value] should be set to the input value:</span>
        <input type="text" [(ngModel)]="myObj.strKey" [ngModelOptions]="{standalone: true}">
    </label>
</form>
<div>this.myObj.str: {{getThat()}}</div>
<div>this: {{getThis()}}</div>

test.component.ts

myForm: any;
myObj: any = {
    strKey: ""
}

private _buildForm() {
    this.myForm = this.fb.group({
        'test': ['1', Validators.required],
    })
}

ngOnInit() { 
    this._buildForm();
}

getThat(): number {
    return this.myForm.get('test').value
}

getThis(): string {
    return this.myObj.strKey;
}

ТАК, мой вопрос: почему обновление происходит не сразу, как я могу это сделать, и возможно ли это сделать вменее сложный способ?

1 Ответ

0 голосов
/ 19 сентября 2018

try add (input) = "0" в

<input id="three" type="radio" formControlName="test" [(value)]="myObj.strKey">

как это

<input id="three" type="radio" formControlName="test" [(value)]="myObj.strKey" (input)="0">
...