Angular 7: значение патча переключателя Form Control не обновляет интерфейс - PullRequest
Новая
       22

Angular 7: значение патча переключателя Form Control не обновляет интерфейс

0 голосов
/ 16 января 2019

Я использую шаблон HTML в Angular 7, который состоит из нескольких переключателей, каждый из которых имеет соответствующую метку - это связано с объектом FormGroup.Нажатие на метку должно изменить состояние переключателя, который будет выбран, и обновить значение соответствующего FormControl.Это работает, проблема, с которой я сталкиваюсь, заключается в установке определенной радиокнопки, которая будет выбираться при загрузке пользовательского интерфейса, или использовании patchValue - состояние formGroup является правильным при загрузке шаблона, но пользовательский интерфейс не отражает того, что конкретный radioButtonбыл выбран.

Вот код, который показывает проблему: 

  export class AppComponent  {
  frequencyMinutesOptions: number[] = [1, 2, 5, 10, 60];
  myForm: FormGroup;
  constructor() { 
  }

  ngOnInit() {
    this.myForm = new FormGroup({
      frequencyMinutes: new FormControl(5,[])
    });
    this.myForm.patchValue({'frequencyMinutes':10})
  }
}

Шаблон HTML: 

<form [formGroup]="myForm">
        <ul>
        <li *ngFor="let frequency of frequencyMinutesOptions">
                <input id="asset-frequency-{{frequency}}" type="radio" value={{frequency}} formControlName="frequencyMinutes" /> 
      <label for="asset-frequency-{{frequency}}"> {{frequency}} </label>
    </li>
</ul>
</form>

Соответствующий CSS: 

input {
    display: none;
}
input:checked+label {
    background-color: blue;
    color: #ffffff;
}

Вы можете увидетьрабочая демонстрация этого здесь:

https://stackblitz.com/edit/angular-of2ubt

(я знаю, что я должен встраивать примеры кода в редакторе Stackoverflow, но я не уверен, как это сделать с Angular7 / машинопись или если это вообще возможно)

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Либо используйте formGroupName, либо вызовите внешнюю функцию, чтобы сделать переключатель по умолчанию истинным. 

    <div class="container">
    <form [formGroup]="myForm">
        <ul>
           <li *ngFor="let frequency of frequencyMinutesOptions">
                <input id="asset-frequency-{{frequency}}" type="radio" value="{{frequency}}" formControlName="frequencyMinutes" [checked]="isDefaultSelection(frequency)" >
      <label for="asset-frequency-{{frequency}}"> {{frequency}} </label>
    </li>
</ul>
   </form>
      <div class="debug">{{myForm.value | json}}
     </div> 
  </div>


   export class AppComponent  {
      frequencyMinutesOptions: number[] = [1, 2, 5, 10, 60];
  myForm: FormGroup;
  constructor() { 
  }

  ngOnInit() {
    this.myForm = new FormGroup({
      frequencyMinutes: new FormControl(5,[])
        });
        this.myForm.patchValue({'frequencyMinutes':10})
      }
     isDefaultSelection(frequency) {
       return frequency == 10 ? true : false;
     }
   }

, либо просто используйте привязку свойства 

<input id="asset-frequency-{{frequency}}" type="radio" [value]="frequency" formControlName="frequencyMinutes">
0 голосов
/ 16 января 2019

это ошибка типа. В вашей HTML-форме значение = "10" интерпретируется как строка "10". Вы должны использовать this.myForm.patchValue({'frequencyMinutes':'10'}) или (см. [Значение]) 

<input id="asset-frequency-{{frequency}}" type="radio" [value]="frequency" formControlName="frequencyMinutes" />
...