Tips for implementing [disabled] directive with dual options in Ionic Angular

Check out my page.html code:

<ion-content *ngIf="charged">
Order ID: {{order.id_acg}} Item Weight(g): Height(cm): Width(cm): Length(cm): 
<ion-list *ngFor="let row of order.rows">
  <ion-item>
    <ion-label>Row to prepare:<strong>{{row.rowId}}</strong> </ion-label>
    <ion-checkbox [(ngModel)]="row.checked" name="row_id"  value="option" (click)="onChange(option)"></ion-checkbox>
  </ion-item>
  
</ion-list>
<ion-button color="success" type="submit" expand="block" [disabled]=" !f.valid && checkedRows.length < 1 " >Create shipment
</ion-button>


 <ion-button color="success" type="submit" expand="block" [disabled]=" !f.valid && checkedRows.length < 1 " (* <== do something like that*)> Create shipment </ion-button>

I am looking to make the confirm button active only when all fields are filled out and at least one checkbox is checked. I can accomplish this separately but not together. Thank you all!!

UPDATE: Here is the form in the preview ion-content:

  <form #f="ngForm" (ngSubmit)="onUpdate()" class="ion-text-center ion-margin-bottom ion-margin-top">
<ion-card-title><strong> Order ID: </strong>{{order.id_acg}}</ion-card-title>
<ion-item>
  <ion-label>Item Weight(g): </ion-label>
  <ion-input required type="number" name="weight" [(ngModel)]="order.weight" placeholder="eg: 1500"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Height(cm): </ion-label>
  <ion-input required type="number" name="height" [(ngModel)]="order.height" placeholder="eg: 0.60"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Width(cm): </ion-label>
  <ion-input required type="number" name="width" [(ngModel)]="order.width" placeholder="eg: 0.30">
  </ion-input>
</ion-item>
<ion-item>
  <ion-label>Length(cm): </ion-label>
  <ion-input required type="number" name="length" [(ngModel)]="order.length" placeholder="eg: 0.20">
  </ion-input>
</ion-item>
<ion-list *ngFor="let row of order.rows">
  <ion-item>
    <ion-label>Row ID to prepare: <strong> {{row.rowId}}</strong> </ion-label>
    <ion-checkbox [(ngModel)]="row.checked" name="row_id"  value="option" (click)="onChange(option)"></ion-checkbox>
  </ion-item>
  
</ion-list>
<ion-button color="success" type="submit" expand="block" [disabled]=" !(f.valid && checkedRows.length > 1)" >Create shipment
</ion-button>
angulartypescriptionic-framework

Answer №1

Utilize the following conditions:

For ensuring at least one checkbox is checked:

[disabled]="!(f.valid && checkedItems.length > 1)"

For requiring all checkboxes to be checked:

[disabled]="!(f.valid && checkedItems.length == order.righe.length)"

Make the update to the checkbox:

<ion-checkbox [(ngModel)]="riga.checked" name="id_riga"  (ionChange)="onChange()"></ion-checkbox>

Update the onChange function with the following:

onChange() {
   this.checkedItems = this.order.righe.filter((d: any) => d.checked);
}

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

ngxs combined with Angular version 5.5

During my attempt to install and configure ngxs, I encountered several issues. Upon comparing my package.json file with the one provided on the ngxs GitHub master branch, I noticed that most of the installations were at version 6+. The error message I rece ...

angularpackage.json

The documentation for Angular guards is riddled with vague and obfuscating statements

I've been delving deep into Angular lately, and I found the documentation to be quite enlightening. currently, I'm focused on learning about guards. In my research, I came across this intriguing statement: The router evaluates CanDeactiva ...

angularangular2-routingguard

Unleash the power of Ionic 3 Calendar by capturing the date change event during selection

When a user selects a date, I need to use that date to perform a search in a database. However, I also need to capture the event when another date is selected in the calendar. Here is my HTML code: <ion-calendar #calendar [events]="currentEvents" ...

angularcalendarionic3

Troubleshooting Ionic 4 application for unit testing errors

Attempting to write a basic unit test similar to this one: it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy ...

angularionic-framework

Is it possible to utilize an await in an rxjs observable?

Implementing an interceptor for my HTTP requests requires the use of the access token from the user instance. Within my app component, I initialize the user: app.component.ts private async restoreUser(): Promise<UserModel | any> { // ... some vi ...

javascriptangularionic-frameworkrxjs

Having trouble with the "Vs Code nx console generate" command? It seems that there are no flags available to configure

My issue involves the nx console extension installed in my Visual Studio Code. Every time I attempt to use the generate command for components, services, or libraries, I receive an error message stating "ng generate @schematics/angular:component This com ...

angulartypescript

Combining values in an Angular project to create a new object with the same properties using TypeScript

Hey there! I hope your day is going well. I'm currently working on calculating multiple objects to create a new one with average values. Here's the schema: export class stats{ assists:number causedEarlySurrender:boolean champLevel:numb ...

jsonangulartypescriptobjectnested-loops

Dealing with compilation errors in TypeScript

I'm working on a simple TypeScript program that looks like this - const users = [{ name: "Ahmed" }, { name: "Gemma" }, { name: "Jon" }]; // We're trying to find a user named "jon". const jon = users.find(u => u.name === "jon"); However, wh ...

typescript

Exploring the combination of Angular and Redux on windows devices

Upon running ng serve, I encountered the following error: The class NgRedux<RootState> has been incorrectly implemented as interface ObservableStore<RootState>. The property [Symbol.observable] is missing in type NgRedux<RootState> but i ...

angularredux

Enhance the Nuxt 3 experience by expanding the functionality of the NuxtApp type with

When I include a plugin in my NuxtApp, it correctly identifies its type. https://i.stack.imgur.com/UFqZW.png However, when I attempt to use the plugin on a page, it only displays the type as "any." https://i.stack.imgur.com/hVSzA.png Is there a way for ...

typescriptpluginsnuxt.js

Executing npm / http-server script

I'm currently working on a shell script that will compile an Angular app using the "ng build" command and then launch a web server to host the app from the dist folder. The web server will be started with the "http-server" command, which needs to be i ...

javascriptangularshellnpmhttpserver

Adding a dynamic index from ngFor to an HTML attribute value can be accomplished by incorporating the current

I am using ngFor and I am trying to make an attribute inside the loop change its value by adding the ngFor index. This means that each div created within ngFor will have a unique attribute value. Source: <div class="class1" *ngFor="let item of items; l ...

htmlangular

"Error in Visual Studio: Identical global identifier found in Typescript code

I'm in the process of setting up a visual studio solution using angular 2. Initially, I'm creating the basic program outlined in this tutorial: https://angular.io/docs/ts/latest/guide/setup.html These are the three TS files that have been genera ...

javascriptvisual-studioangulartypescript

Opening an external link from the Side Menu in Ionic4: A step-by-step guide

In my Ionic project, I have implemented a side menu in the app.html file that is accessible throughout the entire application. This menu contains items with links that need to be opened externally. However, when trying to open them using InAppBrowser, an e ...

angularionic-frameworkionic3ionic4

Should Errors be Handled in the Service Layer or the Controller in the MVC Model?

Currently, I am in the process of developing a Backend using Express and following the MVC Model. However, I am uncertain about where to handle errors effectively. I have integrated express-async-errors and http-errors, allowing me to throw Errors anywher ...

javascriptnode.jstypescriptexpresserror-handling

How can Typescript help enhance the readability of optional React prop types?

When working with React, it is common practice to use null to indicate that a prop is optional: function Foo({ count = null }) {} The TypeScript type for this scenario would be: function Foo({ count = null }: { count: number | null }): ReactElement {} Wh ...

javascriptreactjstypescript

The matInput value remains stagnant and fails to update

I am encountering an issue with a form Input field for username and password. Here is the code snippet: <mat-form-field class="mdb-form-field-modal form-adjustments"> <input (keydown)="emailBtnFocus($event)" tabindex="0" matInput placeholder ...

angularangular-materialangular7angular-forms

Encountering issues when implementing any ng statement

Just recently, I completed the installation of node and npm on my Ubuntu system. Along with that, I also installed Angular CLI. However, upon trying to use the ng statement such as ng new test-project, I encountered the following error: ----Mg: -- watch ...

node.jsangularnpmecmascript-6single-page-application

The call to the hooks is not valid. Hooks must be called within the body of a functional component

Could you please take a moment to review the validate method within the elfe-if condition in the code snippet below? I am encountering an issue when trying to invoke the useLocation method from react-router-dom. Upon researching online, I came across simil ...

reactjstypescriptionic-frameworkionic-react

Can you please tell me the name of the ??= operator in Typescript?

The Lit Element repository contains a function called range that utilizes the ??= operator. This operator resembles the nullish coalescing operator but with an equal sign. Do you know what this specific operator is called? Below is the complete code snipp ...

javascripttypescript