CODEWITHSUNDEEP
javascripthtmltypescriptangular6
Tomasz Jeznach
Tomasz Jeznach

Reputation: 159

Bind reactive forms with custom input etc

I create a custom input and other generic element and at that point I want to bind it to reactive forms. Now I got null as value.

HTML

<label for="name">
  <span>{{title}}</span>
  <input type="text" name="name" formControlName="name">
</label>

Component

export class AppInputComponent implements OnInit {
  @Input() name: string;
  @Input() title?: string;
  @Input() form: FormGroup;
  @Input() options?: Array<string>;

  constructor() { }

  ngOnInit() {
  }

}

This one have its own module file

@NgModule({
  declarations: [
    GFormsFields.AppTextboxComponent,
    GFormsFields.AppSelectComponent,
    GFormsFields.AppInputComponent,
    GFormsFields.AppCheckboxComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
  ],
  exports: [
    GFormsFields.AppTextboxComponent,
    GFormsFields.AppSelectComponent,
    GFormsFields.AppInputComponent,
    GFormsFields.AppCheckboxComponent
  ],
  providers: [],
  bootstrap: []
})

And now I want to bind it to place where I create the reactive form.

HTML

<form [formGroup]="reactiveForms" (ngSubmit)="onSubmit()">

  <app-app-input [title]="'First Name Dude'" [name]="'firstName'" [form]="'form'"></app-app-input>

  <button type="submit" [disabled]="!reactiveForms.valid">Submit</button>

</form>

Component

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  reactiveForms = new FormGroup({
    name: new FormControl
  });

  onSubmit(): void {
    console.log(this.reactiveForms);
  }
}

How can I pass from this custom input to app (it's as test purpose. This will be nested at other component).

What did I do wrong?

Upvotes: 0

Views: 39

Answers (1)

SoroushNeshat
SoroushNeshat

Reputation: 674

change AppInputComponent.html like this :

<label for="name">
 <span>{{title}}</span>
 <input type="text" name="name" [formControl]="form.controls.name">
</label>

and use component like this :

<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [form]="reactiveForms"></app-app-input>

===============================

with above changes your problem will be solved but i would suggest u extra changes for better design .

change AppInputComponent.ts like this :

export class AppInputComponent implements OnInit {
  @Input() name: string;
  @Input() title?: string;
  @Input() nameControl: FormControl;
  @Input() options?: Array<string>;

  constructor() { }

  ngOnInit() {
  }

}

change AppInputComponent.html like this :

<label for="name">
  <span>{{title}}</span>
  <input type="text" name="name" [formControl]="nameControl">
</label>

and finally use it like this :

<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [nameControl]="reactiveForms.controls.name"></app-app-input>

AppInputComponent only needs FormControl of "name" not whole FormGroup . so it is not a good design to pass the entire FormGroup .

Upvotes: 1

Related Questions