I am adding form
input fields using component -
engine-add-contact-form.html
<form (ngSubmit)="onSubmit()" [formGroup]="contact_form">
<md-tab-group>
<md-tab label="Form">
<ang-form></ang-form>
</md-tab>
<md-tab label="Email">
<ang-email></ang-email>
</md-tab>
<md-tab label="Message">
<ang-message></ang-message>
</md-tab>
</md-tab-group>
<button md-raised-button type="submit">Publish</button>
ang-form.html
<div class="form-grid form-title">
<md-input-container>
<input formControlName="contact_form_title"
class="form-title-field" mdInput placeholder="Title" value="">
</md-input-container>
</div>
Using same way i added other components ( ang-email ang-message
) html.
I added [formGroup]
directive at engine-add-form.ts
export class EngineAddFormComponent{
contact_form: any;
form_value: any;
constructor(){
this.contact_form = new FormGroup({
contact_form_title: new FormControl('', Validators.minLength(2)),
........
........
});
}
onSubmit(){
this.form_value = JSON.stringify(this.contact_form.value);
console.log(this.form_value);
}
}
I get following error -
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
I can't understand what is wrong with my code.
You need to pass formGroup (in your case contact_form ) to child component which is ang-form
engine-add-contact-form.html(modified)
<form (ngSubmit)="onSubmit()" [formGroup]="contact_form">
<md-tab-group>
<md-tab label="Form">
<ang-form [group]="contact_form"></ang-form>
</md-tab>
<md-tab label="Email">
<ang-email></ang-email>``
</md-tab>
<md-tab label="Message">
<ang-message></ang-message>
</md-tab>
</md-tab-group>
<button md-raised-button type="submit">Publish</button>
ang-form.html(modified)
<div class="form-grid form-title" [formGroup]="group">
<md-input-container>
<input formControlName="contact_form_title"
class="form-title-field" mdInput placeholder="Title" value="">
</md-input-container>
</div>
Add @Input() group: FormGroup; in your ang-form.component.ts
There are a lot of options of doing this.
1) Here is an example that uses formControl directive and angular DI system:
@Component({
selector: 'ang-form',
template: `
<input [formControl]="control">
`
})
export class AngForm {
control: FormControl;
constructor(private formGroupDir: FormGroupDirective) {}
ngOnInit() {
this.control = this.formGroupDir.control.get('contact_form_title') as FormControl;
}
}
2) Another way it to define ControlContainer view provider on child component:
@Component({
selector: 'ang-form',
template: `
<input formControlName="contact_form_title">
`,
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class AngForm { }
For more examples see:
Wrap the input in a div and pass the formGroup into the div:
<div [formGroup]="formGroup">
<input ...>
</div>
<form [formGroup]="guestForm" novalidate>
<div class="panel-body">
<form> -> Remove this
<div class="col-md-12 col-sm-12">
<div class="form-group col-md-3 col-sm-6">
<label>First Name* </label>
<input formControlName="firstname" type="text" class="form-control input-sm">
</div>
</div>
</form> -> Remove this
</div>
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.