Hello everyone, help, pliz, understand, but something does not reach me:

There is a component:

@Component({ selector: 'app-analytics', templateUrl: './analytics.component.html', entryComponents: [DataRangeComponent] }) export class AnalyticsComponent implements AfterViewInit { filter: FormGroup; constructor(private si: ScriptInjectorService, private fb: FormBuilder) { this.filter = fb.group({ 'cmpBox': [true], 'bnrBox': [false], 'dayBox': [false], 'siteBox': [false], 'cntBox': [false] }); } } 

In the module of this component, the FormsModule, ReactiveFormsModule template is connected:

 <form [formGroup]="filter"> <div class="form-group form-group-with-label"> <label class="control-label">Group by</label> <label class="checkbox-inline"> <input type="checkbox" name="camp" formControlName="cmpBox" /> Campaign </label> <label class="checkbox-inline"> <input type="checkbox" formControlName="bnrBox"/> Banner </label> <label class="checkbox-inline"> <input type="checkbox" formControlName="dayBox"/> Day </label> <label class="checkbox-inline"> <input type="checkbox" formControlName="siteBox"/> Site </label> <label class="checkbox-inline"> <input type="checkbox" formControlName="cntBox"/> Country </label> </div> </form> 

Angular himself understands that this is a form, he hangs classes on it (1), but when you click on the checkbox, the change does not work, and the change event from zone.js (2) hangs on each checkbox; if you remove it, everything works.

http://joxi.ru/ZrJV5gks9wN0wr

Attention, the question: what am I doing wrong, because in theory working with forms should not be any stressful in Angular2. Just subscribing to valueChanged does not work, the data does not change.

    1 answer 1

    I did not see where you take the value of the filter model, maybe it will help you:

    https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive

    In the two-way data binding, it is clear from the controls back to the data model properties. Update data model properties. Design data from control values.