concealing a div within an *ngFor iteration

Attempting to insert a form within a *ngFor loop in order to replicate a button.

html file:

<div *ngFor="let passenger of passengerForm;let i=index;">
  <form>
    <mat-form-field>
      <input matInput type="text" placeholder="Enter Name" 
        [(ngModel)]="passenger.Name">
    </mat-form-field> 

  </Form>
  <div>
    <button (click)="addFieldValue(i); ">
      Add Passenger
    </button>
  </div>

</div>

typescript file:

newAttribute ={}
addFieldValue(index)  {

  if ( index < 3) {
    this.passengerForm.push(this.newAttribute )
    this.newAttribute = {};

  }
}

Answer №1

<div *ngFor="let passenger of passengerForm;let i=index;">
   <input matInput type="text" placeholder="Enter Name" [(ngModel)]="passenger.Name">
</div>

Consider giving this approach a try. It is important to enclose the input field within a div tag.

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

Using Node.js to efficiently post JSON data in bulk through an API

I am working on a project that involves using Angular2 for the frontend and Nodejs API with 'mssql' NPM package to interact with a Microsoft SQL Server. Everything is functioning as expected, but I'm stuck on one specific task. My challeng ...

Is it possible to utilize types as constants in a switch statement?

In my file called checkoutTypes.ts, I have defined some checkout types like this: export type CheckoutInvoiceAddressSection = "InvoiceAddress"; export type CheckoutDeliveryAddressSection = "DeliveryAddress"; export type CheckoutDelivery ...

Can Angular reactive forms be used to validate based on external conditions?

Currently, I am exploring Angular reactive forms validation and facing an issue with implementing Google autocomplete in an input field: <input autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="input-auto input" formControlName ...

Angular 6 - Using properties in classes

Considering a component structured as follows: import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: '...', templateUrl: './...html', styleUrls: ['./...scss'] }) export class Te ...

What is a more efficient way to write nested subscribe in Angular?

I am a beginner with RxJS and I'm interested in learning how to write clean code using it. I currently have a nested subscription that I've been trying to refactor without success. firstMethod() { this.testMethod(name) console.log(this.curren ...

What is preventing the union distribution from occurring with T[number] when T is an ArrayLike?

Below, in this demonstration (linked playground, I anticipate that Foo<[0, 1]> and Bar<[0, 1]> will both be resolved to 0[] | 1[] due to the distribution of unions in conditional types. However, in actuality, Foo<[0, 1]> ends up being (0 ...

Need an email verification request through firebase

Need help with sending email verification upon user sign up. Here is the code in provider/user.ts: onCreate(form: NgForm) { var user = new User(); user.name = form.value.name; user.email = form.value.email; user.contact = form.value.contact; if(form.valu ...

How can a single variable be assigned one of two potential @Inputs in Angular2+?

Currently, I am facing a challenge in defining inputs for an Angular8 Directive while also supporting a legacy Directive. My plan going forward is to name my inputs in camel-case, but the existing inputs are in kebab-case. Therefore, in order to support th ...

Unable to instantiate an Angular component constructor using a string parameter

So, I've created a simple component: export class PlaintextComponent implements OnInit { schema: PlaintextTagSchema; constructor(private _ngZone: NgZone, prompt: string, maxRows: number, maxChars: number) { this.schema.prompt = prompt; t ...

Typescript - Stripping multiple characters from the start and end of a string/Retrieving attributes of a JSON list element

My challenge involves a string like the following : "{"element":"634634"}" My goal is to eliminate {"element":" which remains constant, as well as the final character "}. The only variable component is 634634. How can I achieve this? Alternatively, can ...

Creating web components with lit-element, leveraging rollup, postcss, and the tailwind framework for packaging

I have been attempting to package a functional web component that was developed using the lit-element/lit-html with the tailwind framework utilizing the postcss plugin from the rollup packager. Upon conducting a rollup, I discovered the compiled js and ht ...

Every time I try to use AgGrid selectors, they consistently come back with null results, even though the

I currently have an ag grid in my application: <app-my-component> <ag-grid-angular [gridOptions]="gridOptions" (gridReady)="setGridReady()"> </ag-grid-angular> </app-my-component> When running Karma- ...

What is the process for transferring files from a NodeJS website to Azure CDN?

I am searching for a solution to upload images directly to Azure CDN. Here is the situation: My client Portal built with Angular (4.x) enables users to manage their website, and they need the capability to upload images that will be displayed on the sit ...

Collection of personalized forms where the parent is a FormGroup

One scenario I'm working on involves creating multiple custom formgroup classes that have FormGroup as their parent class, structured like this: export class CustomFormGroup1 extends FormGroup { //custom properties for this FormGroup const ...

Ongoing state configuration in a React hook

My custom hook: export function useToken2() { const { data: session, status } = useSession(); const [token, setToken] = useState<string | null>(null); useEffect(() => { if (status === 'authenticated' && session?.accessToken) { ...

Endlessly triggering a function with React Context

I am facing an issue with the profile loading function in my context. It seems to be executing repeatedly instead of only once or when necessary. For instance, I have two modals - one for cases where no profile exists and another for cases where a profil ...

<Click here to navigate to page 2> await whenClicked={navigation.navigate("page_2")} />

Issue with assigning a 'string' to a parameter in TypeScript while trying to navigate to another screen in React Native. Can anyone help with this error? This problem occurs when we want to navigate to another screen using TypeScript in React Na ...

Sort information based on the initial letter

My challenge is to accurately filter data by the starting letter only, not including middle letters. For example, if I have the word "Karnataka" and want to filter by the letter "K", searching with middle letters like "rna" still filters the result. Howe ...

What are the different methods to display information in Angular?

list.component.ts import { Component, OnInit } from '@angular/core'; import { StudentAPIService } from 'src/app/services/student-api.service'; import { StudentModel } from 'src/app/model/student'; @Component({ selector: &ap ...

What could be causing routerLink to malfunction despite correct configuration?

Is routerLink properly placed in the view? <p><a routerLink="/registration" class="nav-link">Register</a></p> Checking my app.module import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular ...