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.
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.