Angular - Button disabled if input is empty not working

Question

I have inputs like this:

<mat-form-field *ngFor="let d of data">
    <mat-label>Item</mat-label>
    <input [(ngModel)]="d.item" matInput required>
</mat-form-field>`

I have tried this:

 <form #inputForm="ngForm">
        <mat-form-field *ngFor="let d of data">
            <mat-label>Item</mat-label>
            <input [name]="d.item" [(ngModel)]="d.item" matInput required>
        </mat-form-field>
    </form> 

<button class="confirmButton" [disabled]="!inputForm.valid" mat-button [mat-dialog-close]="data">Send</button>

but when I type something just in one of inputs button is enabled, any soultion to this?

bahadrdsr · Accepted Answer · 2020-11-23 10:25:22Z

0

You should use reactive forms for dynamically created forms.

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a basic form control, progress to using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.

See here

answered Nov 23, 2020 at 10:25

bahadrdsr

4743 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CedricYao · Accepted Answer · 2020-11-23 10:57:47Z

0

In your html:

<form [formGroup]="testForm" (ngSubmit)="onSubmit()">
    <label>
    Required Field:
    <input type="text" formControlName="requiredField" required>
  </label>

    <button type="submit" [disabled]="!testForm.valid">Submit</button>
</form>

Then in your component:

  testForm = this.fb.group({
    requiredField: ['', Validators.required]
  });

  constructor(private fb: FormBuilder) { }

answered Nov 23, 2020 at 10:57

CedricYao

1891 silver badge13 bronze badges

2 Comments

Kruno Over a year ago

Because I still haven't read anything about reactive forms, can u tell me how should I populate that requiredField in loop?

CedricYao Over a year ago

This is a similar question to this one, I think. link

Collectives™ on Stack Overflow

Angular - Button disabled if input is empty not working

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related