Guide to successfully submitting an Angular form that includes a nested component

Question

Guide to successfully submitting an Angular form that includes a nested component

I have developed a custom dateTime component for my application. I am currently facing an issue where I need to integrate this component within a formGroup in a separate component. Despite several attempts, I am unable to display the data from the child form within the parentForm. Is there any way to set this as a property or value of the parent form?

Child DateTime Picker HTML:

<mat-form-field>
  <input matInput [ngxMatDatetimePicker]="picker" placeholder="{{ name }}" [formControl]="dateControl" required="true">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker startView="year"></ngx-mat-datetime-picker>
</mat-form-field>

Child Typescript:

@Input() name: string;
@Input() displayTime: boolean;
@Input() allowDateInPast: boolean;

public dateControl = new FormControl();

constructor() { }

ngOnInit() {

}

Parent HTML/form:

<form [formGroup]="formGroup">
<mat-label>Name</mat-label>
    <input type="textfield" formControlName="reportName" matInput required="true" placeholder="Report Name" name="reportName">
</mat-form-field>

<div class="col-sm">
    <app-datetime-picker [name]="'Start Date'" [displayTime]="true" [allowDateInPast]="true"></app-datetime-picker>
</div>

<button class="float-right" [disabled]="formGroup.invalid" (click)="createReport()" mat-raised-button color="primary">Save</button>
  </div>
</form>

Parent Typescript:

formGroup: FormGroup = new FormGroup({

reportName: new FormControl("", Validators.required),
// ?? something here
});

Is it feasible to achieve this? Do I need to utilize @Output() in some way?

Appreciate any assistance.
Travis W-

angular typescript angular7 angular-forms

Answer 1

Answer №1

My preferred approach is to pass the FormControl down as an input. In the child component, set up an input like this:

@Input() dateControl: FormControl;

In the parent html file, simply pass down the FormControl like so:

<app-datetime-picker [dateControl]="formGroup['dateControl'] >

Now you can access and manipulate the properties of the FormControl in the parent component just like you normally would.

While I agree that a control value accessor would also be a great solution, it might be a bit more complex to implement.

Answer 2

My preferred approach is to pass the FormControl down as an input. In the child component, set up an input like this:

@Input() dateControl: FormControl;

In the parent html file, simply pass down the FormControl like so:

<app-datetime-picker [dateControl]="formGroup['dateControl'] >

Now you can access and manipulate the properties of the FormControl in the parent component just like you normally would.

While I agree that a control value accessor would also be a great solution, it might be a bit more complex to implement.

Answer 3

Answer №2

If you want your app-datetime-picker component to function as a form control, it's important to implement the ControlValueAccessor interface. This will enable you to utilize it similarly to an <input> or <select>.

Your date picker control should follow this structure:

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './app-datetime-picker.html',
  styleUrls: ['./app-datetime-picker.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DateControlPicker),
      multi: true
    }
  ]
})
export class DateTimePicker implements ControlValueAccessor {
  disabled = false;
  innerValue: Date;

  //Ensure that your template invokes this function to update the value
  valueChanged(obj: Date) {
    this.writeValue(obj); //store the value for rendering within this component
    this.onChangeCallback(obj); //update the form
  }

  //Fulfill the ControlValueAccessor contract
  writeValue(obj: any): void {
    this.selectedValue = obj;
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  private onTouchedCallback: () => void = () => {
  };
  private onChangeCallback: (_: any) => void = () => {
  };
}

You can then include it in a form template like so:

<form [formGroup]="myFormGroup">
    <app-datetime-picker formControlName="myControlName"></app-datetime-picker>
</form>

The corresponding code to establish the form group would be:

constructor(private formBuilder: FormBuilder){}

ngOnInit(){
    this.myFormGroup = this.formBuilder.group({
        myDateControlName: new FormControl(new Date());
    })
}

Answer 4

If you want your app-datetime-picker component to function as a form control, it's important to implement the ControlValueAccessor interface. This will enable you to utilize it similarly to an <input> or <select>.

Your date picker control should follow this structure:

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './app-datetime-picker.html',
  styleUrls: ['./app-datetime-picker.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DateControlPicker),
      multi: true
    }
  ]
})
export class DateTimePicker implements ControlValueAccessor {
  disabled = false;
  innerValue: Date;

  //Ensure that your template invokes this function to update the value
  valueChanged(obj: Date) {
    this.writeValue(obj); //store the value for rendering within this component
    this.onChangeCallback(obj); //update the form
  }

  //Fulfill the ControlValueAccessor contract
  writeValue(obj: any): void {
    this.selectedValue = obj;
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  private onTouchedCallback: () => void = () => {
  };
  private onChangeCallback: (_: any) => void = () => {
  };
}

You can then include it in a form template like so:

<form [formGroup]="myFormGroup">
    <app-datetime-picker formControlName="myControlName"></app-datetime-picker>
</form>

The corresponding code to establish the form group would be:

constructor(private formBuilder: FormBuilder){}

ngOnInit(){
    this.myFormGroup = this.formBuilder.group({
        myDateControlName: new FormControl(new Date());
    })
}

Answer 5

Answer №3

Shoutout to @SnorreDan for the inspiration... but check out this more detailed answer.

Below is the TypeScript code for the child component:

@Input() dateTime: FormGroup = new FormGroup({
    startDate: new FormControl("", Validators.required),
  });


constructor() { 
    this.dateTime = new FormGroup({});
    this.dateTime.addControl("startDate", new FormControl());
  }

In the child's HTML file:

<mat-form-field>
      <input matInput [ngxMatDatetimePicker]="picker" placeholder="{{ placeholder }}" required="true" formControlName="startDate">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #picker startView="year"></ngx-mat-datetime-picker>
</mat-form-field>

In the parent's formGroup:

 // Make sure this matches the structure in the child component.
 formGroup: FormGroup = new FormGroup({
    startDate: new FormControl("", Validators.required),
 });

And here's how it looks in the parent's HTML:

<app-datetime-picker [dateTime]="formGroup" [placeholder]="'Start Date'" [endDate]="false" [displayTime]="false" [allowDateInPast]="true"></app-datetime-picker>

If you have any questions or need help with this, feel free to reach out! It took me longer than expected to figure it all out.

Answer 6

Shoutout to @SnorreDan for the inspiration... but check out this more detailed answer.

Below is the TypeScript code for the child component:

@Input() dateTime: FormGroup = new FormGroup({
    startDate: new FormControl("", Validators.required),
  });


constructor() { 
    this.dateTime = new FormGroup({});
    this.dateTime.addControl("startDate", new FormControl());
  }

In the child's HTML file:

<mat-form-field>
      <input matInput [ngxMatDatetimePicker]="picker" placeholder="{{ placeholder }}" required="true" formControlName="startDate">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #picker startView="year"></ngx-mat-datetime-picker>
</mat-form-field>

In the parent's formGroup:

 // Make sure this matches the structure in the child component.
 formGroup: FormGroup = new FormGroup({
    startDate: new FormControl("", Validators.required),
 });

And here's how it looks in the parent's HTML:

<app-datetime-picker [dateTime]="formGroup" [placeholder]="'Start Date'" [endDate]="false" [displayTime]="false" [allowDateInPast]="true"></app-datetime-picker>

If you have any questions or need help with this, feel free to reach out! It took me longer than expected to figure it all out.

Guide to successfully submitting an Angular form that includes a nested component

Answer №1

Answer №2

Answer №3

Similar questions

What methods can be used to avoid getting distracted by input?

Can we verify if this API response is accurate?

Guide to aligning a component in the middle of the screen - Angular

Changing the global type in TypeScript

Using Angular to call a separate function from within a click event handler within the same function itself

Implement static backgrounds on images within an Angular application

Having trouble getting the express router to function properly in your Node.js TypeScript project?

Using Angular to parse intricate JSON data

Displaying data in charts and tables using Angular ngrx

What steps should I follow to utilize a JavaScript dependency following an NPM installation?

Difficulty in monitoring the present machine status through XState in a React application

Angular allows for the creation of a unique webpage layout featuring 6 divs

Ways to transfer data from TypeScript to CSS within Angular 6

Using {children} in NextJS & Typescript for layout components

How to efficiently update a child component in React using UseState and establish a connection back to the parent component

Need to import a JSON file and convert it to an interface in order to ensure that all fields are included

Accepting undefined in rest parameter of typescript

Tips for resolving the unmounted component issue in React hooks

Issue with Prettier AutoFormatting in a project that combines TypeScript and JavaScript codebases

Concealing the Submit Button During Server Processing (Issues with Binding?)