Following code works great if is used independently,
<nz-checkbox-group [(ngModel)]="field.options" [formControlName]="field.id" (ngModelChange)="updateValue($event)"></nz-checkbox-group>
Angular6.0 does not allow [(ngModel)] with FormGroup (Reactive Forms). As is deprecated in angular 6.0 and will be removed in angular 7.0 version.
Is there any method to write nz-checkbox-group for ReactiveForm ?
I got a similar problem solved that using the following method. SourceCode
import { Component } from '#angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '#angular/forms';
#Component({
selector: 'nz-demo-checkbox-layout',
template: `
<nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)">
<div nz-row >
<div [formGroup]="myFormGroup">
<label nz-checkbox nzValue="A" formControlName="a">A</label>
<label nz-checkbox nzValue="B" formControlName="b">B</label>
<label nz-checkbox nzValue="C" formControlName="c">C</label>
<label nz-checkbox nzValue="D" formControlName="d">D</label>
</div>
</div>
</nz-checkbox-wrapper>`
})
export class NzDemoCheckboxLayoutComponent {
constructor(private fb: FormBuilder) { }
public myFormGroup = this.fb.group({
a:this.fb.control(true),
b:this.fb.control(false),
c:this.fb.control(false),
d:this.fb.control(false)
});
}
Related
I'm trying to use redux-form
// rootRedcer.ts
import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import translation from './translation/reducer'
export default combineReducers({
form: formReducer,
translation,
})
// components/DashboardHome/index.tsx
import { connect } from 'react-redux'
import DashboardHome from './Home'
export default connect()(DashboardHome)
// components/DashboardHome/DashboardHome.tsx
import * as React from 'react'
import { Field, reduxForm } from 'redux-form'
function handleSubmit(value) { console.log(value) }
const DashboardHome = () => (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" />
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email" component="input" type="email" />
</div>
<button type="submit">Submit</button>
</form>
)
export default reduxForm({
form: 'registration'
})(DashboardHome)
But I get an error
Failed prop type: The prop `fields` is marked as required in
`ReduxForm(DashboardHome)`, but its value is `undefined`.
What is the reason of error? What I'm doing wrong?
Thanks
I downgraded my 'react' and 'react-dom' package from the current version(v16.8.4) to 16.6.3, and the error is gone. There might be a conflict between react-dom and redux-form.
Downgrading didn't work for me.
Switched to
formik
As I see redux-form has broken changes. Demo example doesn't work
I am building a single application using Angular 5. I create a form using the Reactive Forms of Angular.
In the input I use the HTML5 validation attribute required. When I submit the form and input is left empty, I would expect the browsers built in validation of the input:
But nothing.
Is Angular suppressing the browsers built in behavior of validating the required input field? Can I activate it and still using FormBuilder?
import {Component} from '#angular/core';
import {FormBuilder, FormGroup} from '#angular/forms';
#Component({
selector: 'app-system-create',
templateUrl: './system-create.component.html',
styleUrls: ['./system-create.component.scss']
})
export class SystemCreateComponent {
form: FormGroup;
constructor(
private fb: FormBuilder
) {
this.form = fb.group({
shortName: ''
});
}
onSubmit() {
console.log("on submit");
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-element">
<label>short name</label>
<input class="form-control" formControlName="shortName" type="text" placeholder="e.g. SYS" id="systemForm_shortName" required>
</div>
<button class="btn btn-primary" type="submit">Speichern</button>
</form>
You should try adding the attribute ngNativeValidate in your form element to prevent Angular from adding the novalidate html attribute. As explained in the Angular NgNoValidate directive documentation.
If you want to use native validation with Angular forms, just add ngNativeValidate attribute
This question already has answers here:
Angular 2 - innerHTML styling
(11 answers)
Closed 5 years ago.
Hello I am trying to add html from a file that is returned from the api, this is working. what I am needing help with is when I add an inline style it doesn't work, but if I create a class in the style.css it and add it to the html it then works.
All of this said, I need to get inline style working. I would like to get <span style="color:red;">I am red</span> working.
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button (click)="onClick()">Click To Add Html</button>
</div>
<div *ngIf="html!==''" [innerHtml]="html"></div>
`,
})
export class App {
name:string;
html:string=null;
const htmlConst:string = `<span style="color:red;">I am red</span>`;
/*
I have tried [style] = "color:red;"
style="color:red;"
*/
constructor() {
this.name = `Angular! v${VERSION.full}`
}
onClick():void{
if(this.html !== ''){
this.html= this.htmlConst;
}
else{
this.html = '';
}
}
}
any advise would be helpful.
import { Component,ViewEncapsulation } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button (click)="onClick()">Click To Add Html</button>
</div>
<div *ngIf="html!==''" [innerHtml]="html"></div>
`,
encapsulation: ViewEncapsulation.None
})
Please refer from https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation
I'm trying to implement Pikaday in Meteor React. I've searched through numerous solutions and I can't get any of them to work. As I understand it, this is supposed to work:
I installed pikaday as follows: npm install -- save react react-pikaday.
Below is my code - What am I doing wrong?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Pikaday from 'react-pikaday';
export default class TestForm extends Component {
ComponentDidMount() {
new Pikaday({
field: ReactDOM.findDOMNode(this.refs.TestForm),
format: 'DD/MM/YYYY',
firstDay: 0,
minDate: new Date(new Date()),
maxDate: new Date('2050-12-31'),
yearRange: [2000,2050],
});
}
render() {
return(
<div>
<form>
<div className="row">
<div className="input-field col s6">
<input ref="TestForm" type="text" />
</div>
</div>
</form>
</div>
)
}
}
From the github page, there is a component that can be used:
<Pikaday value={date} onChange={this.handleChange} />
If you want to do the componentDidMount way, add an id to the div tag. and use document.getElementById('textId'); instead of using ReactDOM.
I also noticed a typo in ComponentDidMount() {. It should be componentDidMount (c - lowercase).
This question already has answers here:
Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property
(12 answers)
Closed 6 years ago.
I'm trying to create a wizard using Angular2's router. Angular2 suggests to have a main bootstrap file, which will bootstrap all the app components. Since i'm not able to do a SPA, i would like each page to bootstrap it's own components.
I get the following error about routerLink when i run the application:
"EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("For="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [ERROR ->][routerLink]="'' + wizard.path + ''">{{wizard.name}}
"
Here is my page component:
/// <reference path="angular2/typings/browser.d.ts" />
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {Wizard1} from './wizard1';
import {Wizard2} from './wizard2';
import {Step1} from './step1';
import {Step2} from './step2';
import {Step3} from './step3';
import {Step4} from './step4';
import {Step5} from './step5';
#Component({
selector: 'page',
template:
'<div>
<select (change)="setSelectedWizard($event.target.value)">
<option *ngFor="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [routerLink]="'' + wizard.path + ''">{{wizard.name}}</option>
</select>
<wizard1>
<step1>
<h1>First!</h1>
</step1>
<step2>
<h1>Second!</h1>
</step2>
<step3>
<h1>Third!</h1>
</step3>
<step4>
<h1>Fourth!</h1>
</step4>
<nav>
<button type="button" value="Next" [class]="(SelectedStepIndex == Steps.length) ? 'btn btn-primary hidden' : 'btn btn-default'" (click)="next()" [routerLink]="['' + Steps[SelectedStepIndex] + '']">Next</button>
</nav>
<router-outlet></router-outlet>
</wizard1>
<wizard2>
<step1>
<h1>First!</h1>
</step1>
<step5>
<h1>Fifth!</h1>
</step5>
<nav>
<button type="button" value="Next" [class]="(SelectedStepIndex == Steps.length) ? 'btn btn-primary hidden' : 'btn btn-default'" (click)="next()" [routerLink]="['' + Steps[SelectedStepIndex] + '']">Next</button>
</nav>
<router-outlet></router-outlet>
</wizard2>
<router-outlet></router-outlet>
</div>'
})
export class Page {
Wizards = [{name: 'wizard1', path:'/wizard1'}, {name: 'wizard2', path: '/wizard2'}];
SelectedWizard = this.Wizards[0];
setSelectedWizard(value) {
this.SelectedWizard = value;
}
}
bootstrap(Page, [ROUTER_PROVIDERS]);
bootstrap(Wizard1, [ROUTER_PROVIDERS]);
bootstrap(Wizard2, [ROUTER_PROVIDERS]);
bootstrap(Step1);
bootstrap(Step2);
bootstrap(Step3);
bootstrap(Step4);
bootstrap(Step5);
Wizard1
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
#RouteConfig([
{ path: '/wizard1', name: 'wizard1', component: Wizard1 }
])
#Component({
selector: 'wizard1',
template:`<div><ng-content></ng-content></div>`
})
export class Wizard1 {
Steps = ['/Step1', '/Step2', '/Step3', '/Step4'];
SelectedStepIndex = 0;
next() {
++this.SelectedStepIndex;
}
}
Wizard2
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
#RouteConfig([
{ path: '/wizard2', name: 'wizard2', component: Wizard2 }
])
#Component({
selector: 'wizard2',
template:`<div><ng-content></ng-content></div>`
})
export class Wizard2 {
Steps = ['/Step1', '/Step5'];
SelectedStepIndex = 0;
next() {
++this.SelectedStepIndex;
}
}
All steps are similar to this, in their own .ts files
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
#RouteConfig([
{ path: '/Step1', name: 'Step1', component: Step1 }
])
#Component({
selector: 'step1',
template: `<div><ng-content></ng-content></div>`
})
export class Step1 {
}
What is going on? why isn't this working?
Environment
Visual Studio 2015 update 1
ASP.NET 5 and MVC 6
DNX 4.5.1 and 5.0
Angular2 Typescript
Add ROUTER_DIRECTIVES to your component providers:
#Component({directives: [ROUTER_DIRECTIVES]})
You are missing ROUTER_DIRECTIVES is missing to import on Page components & directives option of ComponentMetaData, that is the reason why angular doesn't understand routerLink & routerOutlet directive on page. Do include below line
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';
Then obviously inject ROUTER_DIRECTIVES in that component directives option
#Component({
selector: 'page',
//....
//other options
//....
directives: [ROUTER_DIRECTIVES]
})
I'm not sure why you did bootstrap you application multiple times? Ideally there should be only one main-component, other component will child of it.