Angular: переключатель [флажок] не установлен с эталонной переменной шаблона - PullRequest
Новая
       43

Angular: переключатель [флажок] не установлен с эталонной переменной шаблона

1 голос
/ 27 июня 2019

Как видно из заголовка, у меня есть сценарий, в котором, если установлен переключатель «Выбрать все», он должен проверить все переключатели в столбцах ниже. К сожалению, это не работает.

Вот пример: 

<table>
  <thead>
    <th>Role</th>
    <th colspan="3">Access</th>
  </thead>
  <tbody>
    <tr>
      <td>Select All</td>
      <td>
        <input #none type="radio" name="access0" value="allNone"/>
        <label>None</label>
      </td>
      <td>
        <input #readOnly type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input #full type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

И здесь - это ссылка на образец StackBlitz.

Я не уверен, почему, например, все переключатели 'None' не проверяются при установке [checked] следующим образом: 

<input type="radio" name="access1" value="None" [checked]="none.checked"/>

Ответы [ 3 ]

1 голос
/ 28 июня 2019

disclamer это не ответ, это ответ на комментарий об использовании [(ngModel)] в ReactiveForm.

@ monstertjie_za, документ указывает, что вы не используете в одном и том же входе ВМЕСТЕ formControlName и [(ngModel)], а не то, что вы не можете использовать вход в реактивную форму. Представь себе твой пример. У вас есть реактивная форма, как 

form=new FormGroup({
    accessAdmin:new FormControl(),
    accessPersonal:new FormControl()
})

Но вы хотите разрешить пользователю быстрый выбор 

<code><form [formGroup]="form">
    <!--a input that not belong to the ReactiveForm that use [(ngModel)]-->
    <div>
        <label><input type="radio" value="None" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>None</label>
    <label><input type="radio" value="ReadOnly" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>ReadOnly</label>
    <label><input type="radio" value="Access" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>Access</label>
  </div>
        <!--inputs that belong to our formGroup-->
  <div>
    <label><input type="radio" value="None" formControlName="accessAdmin"/>None</label>
    <label><input type="radio" value="ReadOnly" formControlName="accessAdmin"/>ReadOnly</label>
    <label><input type="radio" value="Access" formControlName="accessAdmin"/>Access</label>
  </div>
  <div>
    <label><input type="radio" value="None" formControlName="accessPersonal"/>None</label>
    <label><input type="radio" value="ReadOnly" formControlName="accessPersonal"/>ReadOnly</label>
    <label><input type="radio" value="Access" formControlName="accessPersonal"/>Access</label>
  </div>
</form>
<pre>
  {{form?.value|json}}

где у вас есть такая функция, как 

change(value) {
    this.form.get('accessAdmin').setValue(value);
    this.form.get('accessPersonal').setValue(value);
  }

Вы можете увидеть демонстрацию стекаблика

Вы видите, что мы используем вход с [(ngModel)], чтобы помочь пользователю изменить значение form.accessAdmin и form.accessPersonal. Это не связано со ссылкой, которую вы мне показываете, и отлично сформировано - даже я скажу, что это хорошо, чтобы помочь пользователю -

0 голосов
/ 27 июня 2019

Проверка на наличие изменений: 

<table (click)="cd.detectChanges()">
    <thead>
        <th>Role</th>
        <th colspan="3">Access</th>
    </thead>
    <tbody>
        <tr>
            <td>Select All</td>
            <td>
                <input #none type="radio" name="access0" value="allNone"/>
        <label>None</label>
      </td>
      <td>
        <input #readOnly type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input #full type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" [value]="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

И TS: 

import {ChangeDetectorRef, Component} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(protected cd: ChangeDetectorRef){}
}
0 голосов
/ 27 июня 2019

вы должны использовать ngModel для обновления значений переключателей, как это -

app.component.html 

<table>
  <thead>
    <th>Role</th>
    <th colspan="3">Access</th>
  </thead>
  <tbody>
    <tr>
      <td>Select All</td>
      <td>
        <input type="radio" name="access0" value="allNone" 
        [(ngModel)]='none'/>
        <label>None</label>
      </td>
      <td>
        <input [(ngModel)]='readonly' type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input [(ngModel)]='full' type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" [value]="1" [checked]='none'/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]='readonly'/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readonly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public none=false;
  public readonly=false;
  public full=false;
}
...