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

Component re-rendering and initializing useReducer

Exploring RouteReuseStrategy in Angular 2

Passing data in Angular 4 with eventEmitter across multiple layers of components

Verify the accuracy of each object in an array by comparing it to an enum and confirming its validity

Comparison between typings and @types in the NPM scope

Tips for displaying only the initial 15 characters of a text value

Uncheck all boxes except for the required or disabled boxes in Angular

Insert a blank row at the top of the grid in Wijmo for Angular 2

What is the method for incorporating a variable into a fragment when combining schemas using Apollo GraphQL?

What steps do I need to take to create a fresh interface in useState with the help of Typescript

Potential null object in React/TypeScript

Using Angular 2 to bind ngModel to a property's reference

Creating a Typescript interface where one property is dependent on another property

Guide on accessing js file in an Angular application

When implementing angular routing, the default route is not automatically selected

What could be the reason for the react hook form failing to capture the data upon submission?

Guide on associating user IDs with user objects

How to Open a Work Item in TFS 2017 Using an Angular Application

typescript mistakenly overlooked a potential undefined value in indexed records

What is the correct way to access and assign a value from a different getter or setter? I am facing an issue with the creation of my second array