How to require 2 out of 4 input fields in Angular using typescript

exploring the intricacies of design decisions, sub systems, frameworks, and libraries

Hello! I am relatively new to Angular and have encountered a puzzling issue that I can't quite figure out. I could easily create a lengthy if statement to address it, but I wouldn't gain any valuable insights. The problem at hand involves a large form divided into 4 sections, each containing 5 input fields. To progress to the next webpage, I want to ensure that at least 2 sections are completely filled in.

I attempted the following approach:

tabel11: new FormGroup({
        tabel11A: this.tabel11A,
        tabel11B: this.tabel11B,
        tabel11C: this.tabel11C,
        tabel11D: this.tabel11D,
        tabel11E: this.tabel11E
      })
if(this.inputTabelForm.get('tabel9').valid){
      i+= 1;
    }
    if(this.inputTabelForm.get('tabel10').valid){
      i+= 1;
    }
    if(this.inputTabelForm.get('tabel11').valid){
      i+= 1;
    }
    if(i >= 2){
      return true;
    }

It appears that even when all fields are left empty (NULL), they are still considered valid, complicating matters for me. If anyone knows the correct solution to this issue, I would greatly appreciate your guidance!

Answer №1

Make sure to verify each input field in the subform individually instead of checking the entire subtable as a single object. This ensures that all inputs within a specific subform are properly filled out. For detailed guidance on Angular form validation, be sure to refer to this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Securing access to a RESTful web service in AngularJS 2

I'm looking to access an API that returns a JSON file, but I'm unsure of how to include the authentication in my HTTP header. Here's my TypeScript service code: import {Http} from 'angular2/http'; import 'rxjs/add/operator/ma ...

Obtain the content window using angularJS

I've been attempting to retrieve the content window of an iframe element. My approach in JQuery has been as follows: $('#loginframe')[0].contentWindow However, since I can't use JQuery in Angular, I've been trying to achieve thi ...

Navigating with Angular inside an HTTP POST Observable and subscription

Whilst attempting to guide a user towards a dashboard within the response of an httpClient.post request, I have encountered a peculiar issue. The page navigates "successfully" (as evidenced by the URL bar) but unfortunately, most elements of the components ...

Using DevExtreme Angular to establish an initial filter value for a DxDataGrid custom headerFilter

What is the best way to set a starting headerFilter value with a custom expression like this? Using filterValues="xxx > 0" does not seem to work. <dxi-column caption="" dataField="xxx" [headerFilter]="headerFilter ...

Deliver transcluded data to the descendant element of a hierarchical roster

I understand that there have been similar questions asked before, but my situation is slightly different. I am currently constructing a nested list and I want to include custom HTML content in each grandchild element alongside some common HTML. The problem ...

Transitioning to @angular/router version 3.0.0-alpha.3: A guide to implementing OnActivate upgrade

Recently, I updated @angular/router to version 3.0.0-alpha.3 and noticed that the OnActivate interface, which was present in version 2.0.0-rc.1, seems to be missing. Any clues on this change would be greatly appreciated. ...

Typescript Error: Trying to access a property that is undefined

I am a beginner in typescript and believe that the issue I am facing is related to typescript. Currently, I am working on an Ionic app where I have a function setwall() being called from home.html. The setwall() function is defined in home.ts. However, whe ...

Displaying time in weekly view on the Angular 4.0 calendar

I've integrated the library into my Angular application to manage calendar events display and creation. The app features a monthly, weekly, and daily view option for users. However, I noticed that in the weekly view, only the dates are shown without ...

Reactive sidenav in action with Angular

Exploring the creation of a reactive component for educational purposes, disregarding project structure =). My directory layout: app.component.html <app-header></app-header> <app-sidenav></app-sidenav> <app-footer></app ...

Enhance Angular Forms: Style Readonly Fields in Grey and Validate Data Retrieval using Typescript

Is there a way to disable a form and make it greyed out, while still being able to access the values? https://i.sstatic.net/wt2c3.png 1/ Disabling controls with this.roleForm.controls['id'].disable() in Typescript does not allow me to retrieve ...

Encountering a problem with the 'string' parameter when using TypeScript

I keep encountering the following error message: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ barkingRoadProject: string[]; }'. No index signature with a paramet ...

Even after rigorous type checking, TypeScript continues to throw the ts2571 error when handling an unidentified variable

Consider this scenario: the code snippet below will result in an Object is of type 'unknown'. error: let obj: {[key: string]: unknown} = {hello: ["world", "!"]}; // Could be anything with the same structure let key = "he ...

Additional optional class name within a TypeScript component

I am utilizing class names to apply multiple classes to a React component. Within my button, I want the option to include a class to the component if desired, but it should be optional. Unfortunately, I encountered a type error as depicted in the image li ...

Exploring TypeScript interfaces with optional properties and returning types

As a newcomer to TypeScript, I am currently exploring the documentation and came across an example in the "Optional Properties" section that caught my attention: interface SquareConfig { color?: string; width?: number; } function createSquare(config: ...

I need help understanding how to access the map[#var] when using *ngFor="var of list"

If I define a local variable using *ngFor in my template, how can I utilize it as a key to access a map? The template code shown below leads to a Parser Error: Unexpected token # at column 12 in ... <li *ngFor="#item of my_list"> <div [class]="m ...

I'm experiencing difficulty in scrolling on my Nextjs web application

Currently, I am facing an issue with my portfolio webpage which is divided into 3 main components - Hero, About, and Portfolio. The layout structure is as follows: export default function RootLayout({ children, }: { children: React.ReactNode }) { ret ...

Using Typescript to assign a custom object to any object is a powerful feature

I am attempting to organize table data by utilizing the code found at https://github.com/chuvikovd/multi-column-sort. However, I am unsure of how to pass a custom object to the SortArray[T] object. The structure of my custom object is as follows: const ob ...

A guide to locking columns in PrimeNG data tables for Angular 2

Can we freeze the first few columns in a PrimeNg data table and enable horizontal scroll-x for the remaining columns? I am looking for a functionality similar to this example: https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_colu ...

Angular Reactive Forms can efficiently manage checkboxes that are organized in two levels or dimensions

As I work with Angular 6/7 and utilize reactive forms, I am faced with a form containing a list of permissions represented by two checkboxes in each row. Initially, the second checkbox within the row should be disabled upon first loading, only becoming ena ...

Creating an interface for a class instance through the implementation of a class constructor

I am working on an application where developers can specify which component they want to render a certain part. I need users to understand that they must implement an interface, but I'm struggling with correctly writing the typing. export interface I ...