Skip to content

Instantly share code, notes, and snippets.

@bastijns-jeroen

bastijns-jeroen/angular-reactive-form-with-components.ts

Created April 13, 2017 18:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bastijns-jeroen/fac7847af8e713401c62caf72a691a96 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bastijns-jeroen/fac7847af8e713401c62caf72a691a96 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
angular-reactive-form-with-components.ts
@Component({
template: `
<form [formGroup]="form" (ngSubmit)="save()">
<div class="form-group">
<label for="firstname">firstname</label>
<input name="firstname" class="form-control" type="text" formControlName="firstname" />
<div *ngIf="form.get('firstname').touched">
<div *ngIf="form.get('firstname').hasError('required')">This field is required.</div>
</div>
</div>
<div class="form-group">
<label for="lastname">lastname</label>
<input name="lastname" class="form-control" type="text" formControlName="lastname" />
<div *ngIf="form.get('lastname').touched">
<div *ngIf="form.get('lastname').hasError('required')">This field is required.</div>
</div>
</div>
<address-form-component (formReady)="addFormControl('address', $event)"></address-form-component>
<button id="save" type="submit" [disabled]="!form.valid">save</button>
</form>
`
})
export class NewspaperSubscribeComponent implements OnInit {
private form: FormGroup;
constructor(private newspaperService: NewspaperService, private fb: FormBuilder) {}
ngOnInit(): void {
this.form = this.fb.group({
"firstname": new FormControl("", Validators.required),
"lastname": new FormControl("", Validators.required)
});
}
private addFormControl(name: string, formGroup: FormGroup) : void {
this.form.addControl(name, formGroup);
}
public save(): void {
this.newspaperService.createSubscription(this.form.value).subscribe();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment