Is there a way to display an array of data in separate mat-form-field components?

Question

Is there a way to display an array of data in separate mat-form-field components?

I am dealing with an array that stores 4 data points: [onHour, onMinute, offHour, offMinute]. I also have 4 elements that are not in an array and need to be repeated.


        <div class="on">
            <mat-form-field appearance="fill" class="time_field">
                <mat-label>minute</mat-label>
                <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59">
            </mat-form-field>
            <mat-form-field appearance="fill" class="time_field">
                <mat-label>hour</mat-label>
                <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24">
            </mat-form-field>
        </div>

        <div class="off">
            <mat-form-field appearance="fill" class="time_field">
                <mat-label>minute</mat-label>
                <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59">
            </mat-form-field>
            <mat-form-field appearance="fill" class="time_field">
                <mat-label>hour</mat-label>
                <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24">
            </mat-form-field>
        </div>

Within the .ts component, I have a variable

periodicValues = [this.hourGlowPeriodic?.value, this.minuteGlowPeriodic?.value, this.hourSilencePeriodic?.value, this.minuteSilencePeriodic?.value];

that populates the interface upon submit button click. However, I am unsure of how to fill the form control with the periodicValues[] array in the ngOnInit lifecycle hook.

I attempted to use this code snippet, but it did not work as expected:


        this.form = this.formBuilder.group({
            hour_glow_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[0], disabled: false }),
            minute_glow_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[1], disabled: false }),
            hour_silence_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[2], disabled: false }),
            minute_silence_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[3], disabled: false }),
        });

angular typescript angular-material

Answer 1

Answer №1

To enhance your HTML code, consider updating the last two instances of formControlName with the values hour_silence_periodic and minute_silence_periodic. Your current code appears to be correct based on the provided data. Below is a sample working example. Kindly let me know if you encounter any issues.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    CommonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
  ],
  template: `
 <form [formGroup]="form">
    <div class="on">
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>minute</mat-label>
          <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59">
       </mat-form-field>
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>hour</mat-label>
          <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24">
       </mat-form-field>
    </div>
    <div class="off">
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>minute</mat-label>
          <input matInput type="number" formControlName="hour_silence_periodic" min="0" max="59">
       </mat-form-field>
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>hour</mat-label>
          <input matInput type="number" formControlName="minute_silence_periodic" min="0" max="24">
       </mat-form-field>
    </div>
 </form>
  `,
})
export class App {
  name = 'Angular';
  data = {
    element: {
      periodic_values: [1, 2, 3, 4],
    },
  };
  form: FormGroup = new FormGroup({});

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      hour_glow_periodic: new FormControl({
        value: this.data.element?.periodic_values[0],
        disabled: false,
      }),
      minute_glow_periodic: new FormControl({
        value: this.data.element?.periodic_values[1],
        disabled: false,
      }),
      hour_silence_periodic: new FormControl({
        value: this.data.element?.periodic_values[2],
        disabled: false,
      }),
      minute_silence_periodic: new FormControl({
        value: this.data.element?.periodic_values[3],
        disabled: false,
      }),
    });
  }
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

stackblitz

Answer 2

To enhance your HTML code, consider updating the last two instances of formControlName with the values hour_silence_periodic and minute_silence_periodic. Your current code appears to be correct based on the provided data. Below is a sample working example. Kindly let me know if you encounter any issues.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    CommonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
  ],
  template: `
 <form [formGroup]="form">
    <div class="on">
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>minute</mat-label>
          <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59">
       </mat-form-field>
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>hour</mat-label>
          <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24">
       </mat-form-field>
    </div>
    <div class="off">
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>minute</mat-label>
          <input matInput type="number" formControlName="hour_silence_periodic" min="0" max="59">
       </mat-form-field>
       <mat-form-field appearance="fill" class="time_field">
          <mat-label>hour</mat-label>
          <input matInput type="number" formControlName="minute_silence_periodic" min="0" max="24">
       </mat-form-field>
    </div>
 </form>
  `,
})
export class App {
  name = 'Angular';
  data = {
    element: {
      periodic_values: [1, 2, 3, 4],
    },
  };
  form: FormGroup = new FormGroup({});

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      hour_glow_periodic: new FormControl({
        value: this.data.element?.periodic_values[0],
        disabled: false,
      }),
      minute_glow_periodic: new FormControl({
        value: this.data.element?.periodic_values[1],
        disabled: false,
      }),
      hour_silence_periodic: new FormControl({
        value: this.data.element?.periodic_values[2],
        disabled: false,
      }),
      minute_silence_periodic: new FormControl({
        value: this.data.element?.periodic_values[3],
        disabled: false,
      }),
    });
  }
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

stackblitz

Is there a way to display an array of data in separate mat-form-field components?

Answer №1

Similar questions

Enhancing Ionic's functionality by including extra access control to permit origin in response headers

Encountering "Object is possibly undefined" during NextJS Typescript build process - troubleshooting nextjs build

(NG2-CHARTS) Unable to connect to the Chart Type as it is not recognized as a valid property for binding

Tips for Achieving Observable Synchronization

Receiving API response with a format similar to JSON, but encountering an issue during the parsing process

Error: Navbar component cannot access static member

I am looking to superimpose one rectangle over another rectangle

creating a new date instance with a specific time zone

Creating multilingual menus with ABP and Nebular

Updating the variable in Angular 6 does not cause the view to refresh

A guide to merging two JSON objects into a single array

Refresh the page using a promise in Angular after a delay of 3 seconds

Hello everyone, I'm encountering problems while trying to retrieve data from

Navigating in Angular 4 using the `router.navigate`

Is it possible to spread an empty array in JavaScript?

An effective way to define the type of a string property in a React component using Typescript

Ways to extract the body/message of a request from an HttpErrorResponse in Angular using the ErrorHandler

Error in InversifyJs exclusively occurring in Internet Explorer

Using the TypeScript NextPage function along with the getInitialProps static method and @typescript-eslint/unbound-method

How can I lower the version of Angular CLI?