In my usual practice, when I need a form field to be part of the submission but not visible, I typically use <input type="hidden" />
However, when working with matInput, the option for a type of hidden is not available. While I could apply display: none;, this method often omits the value from the submission process.
Is there a method to conceal the input in a dynamic material form while still ensuring the value is included in the submission?
During my testing with Angular version 11, I discovered that the hidden attribute is still not compatible with the mat-form-field element. Instead of creating a CSS class or using type=hidden or the *ngIf directive (which can sometimes cause unnecessary component lifecycle refresh), I simply made the change from [hidden]="variable" to
[class.cdk-visually-hidden]="variable"Credit for this solution goes to @EdWood
In the case of matInput, the type="hidden" attribute does not function properly. When you check your browser console, you will likely encounter an error message stating "ERROR Error: Input type "hidden" isn't supported by matInput." If you attempt to submit a form with type="hidden", the form may become corrupt and only reveal partial form values. To work around this issue, one can apply a CSS class to the mat-form-field tag:
<mat-form-field class="invisible example-full-width">
<input matInput placeholder="Favorite food" value="Sushi" ngModel name="fish">
</mat-form-field>
Helpful CSS snippet:
.invisible{
display: block;
visibility: hidden;
height: 0;
width: 0;
}
With Angular 10, it is possible to utilize *ngIf in conjunction with the <mat-form-field> element.
To address this problem, consider utilizing the hidden="true" attribute.
<input hidden="true" matInput class="form-control" formControlName="yourfieldname">
Since hidden fields remain concealed from view, they are insignificant. An alternative approach would be to define the control within the form component like so:
this.customForm = this.formBuilder.group({
hidden_field: ["default_value", Validators.nullValidator],
another_field: ['', Validators.required],
});
By setting a default value for the hidden_field, it will be included when the form is submitted along with other form data.
UPDATE: The method outlined below is effective for Angular 7.
To conceal certain elements, you can employ the hidden directive.
<mat-form-field [hidden]="!(formX.value.otherControl == '1')">
<input matInput type="number" placeholder="An Input" formControlName="aControl">
</mat-form-field>
Although I referenced a form value labeled formX (formX.value.otherControl) in my demonstration, you can utilize true for your specific situation.
<mat-form-field [hidden]="true">
<input matInput type="number" placeholder="An Input" formControlName="aControl">
</mat-form-field>
If you are still searching for the solution, I have successfully achieved what you are looking for by excluding certain inputs in a form submission. I simply omitted them from the form and used action='/path', post method, and a submit type button. For example:
<form action='/path' method='post'>
<mat-form-field class="form-element">
<label for="item">
<input matInput placeholder="My Item"
[value]="paymentDetail._amount" name="item" id="item">
</label>
</mat-form-field>
<input name="anotherItem" id="anotherItem" type="hidden"
[value]="model._itemDescription" >
</form>
Here is a code snippet relating to the matInput. Initially, the mat-form-field has an input hidden attribute which functions correctly. To prevent it from being clicked, simply add disabled at the end of the input tag.
HTML
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi" type="hidden">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
</form>
https://stackblitz.com/edit/angular-g9jxjd-huz6me?file=app/input-overview-example.html
I've recently dived into learning Phaser 3.60, but I've hit a roadblock. I'm struggling to set up the hitbox for my raindrop and umbrella interaction. What I'd love to achieve is having raindrops fall from the top down and when they tou ...
Seeking guidance on how to disable data-tap functionality in Ionic 2 within a leaflet map div. Anyone familiar with this? In Ionic-v1, the solution involved adding data-tap-disabled="true" to the map container (ion-content). I recently integrated the lea ...
I am in the process of converting my lexer and parser to TypeScript. You can find the current JavaScript-only code here. To simplify, I have created an example pseudocode: type X = { type: string } type A = X & { list: Array<A | B | C> } ty ...
I am currently working on a Typescript Vue project involving Leaflet. I came across some code for lazy-loading map markers, but it was written in Javascript. Although the code works fine, I keep receiving errors and warnings from VSCode because this is not ...
After creating a nav-bar using the CLI with the following command: ng g @angular/material:material-nav --name=version-nav I imported it into my component as follows: <app-version-nav></app-version-nav> Unfortunately, I encountered this erro ...
My file contains the following component with a remote URL: @Component({ templateUrl: '/mobilesiteapp/template/?path=pages/tabs' }) export class TabsPage { } Unfortunately, when compiling, I encountered this error message: [13:28:50] Error ...
I have received data from a web API that resembles the structure below. I am looking for guidance on how to properly map the product array into individual Products. My main objective is to convert the eating_time values into JavaScript datetime format. Cu ...
As a relatively new Angular2 developer and a complete novice at integrating it into an ASP.NET Web Application, I encountered a peculiar error while attempting to build in debug mode within my Angular2 ASP.NET web application. Surprisingly, the same error ...
I developed an application using IONIC-2 Beta version and I am interested in incorporating a for-each loop. Can anyone advise if it is possible to use for each in Angular-V2? Thank you. ...
I'm experimenting with displaying ng-Bootstrap tabs vertically, but the provided example doesn't quite fit my needs. I'm envisioning a layout similar to what I've sketched in the diagram. Do you think it's achievable? Any suggestio ...
I've been attempting to set up an http interceptor with the new HttpClient in Angular 4.3, but I'm continuously encountering this error message: ERROR Error: Uncaught (in promise): Error: No provider for AuthInterceptor! In my app.module.ts f ...
Hey there amazing developers! I need some help with a query. When using useQuery, the imported values can be undefined which makes it tricky to apply them as defaultValues. Does anyone have a good solution for this? Maybe something like this would work. ...
I'm facing a challenge in pinging multiple APIs within a single function. It seems like it should be possible, especially since each API shares the same headers and observable. I attempted to write a function for this purpose, but unfortunately, it do ...
There is a function in my code that takes a single parameter of type any: function doSomething(param: any) { // Code to handle the param } When I call this function without passing any arguments: doSomething(); An error is thrown saying: "Expected 1 ...
Seeking help with implementing a concept for the following scenario: I have a parent search component containing several child components for displaying facets and search results. I want to automatically trigger a search once the application has finished ...
Just starting out with Angular 2 and I'm trying to implement infinite scrolling for fetching data using REST API calls. Initially, I make a call like this to get the first set of 50 records: localhost:8080/myapp/records=items&offset=0&limit=5 ...
My dilemma lies in a function that takes an argument object and returns another object. This returned object will have a "bar" key based on the presence of the "includeBar" key as an option. I attempted to handle this scenario with different overloads: int ...
I'm facing an issue with my TypeScript code snippet: function askLogin(): never { location.replace('/login'); } The TypeScript compiler is flagging an error: A function returning 'never' cannot have a reachable end point. Do ...
Currently, I am working on a project using Ionic2 + Laravel. My goal is to create an "interceptor" that will automatically add the JWT token for authentication from LocalStorage to all of my Http requests. To achieve this, I have created a Service with ...
I am attempting to transfer objects from an array to components. I have followed this approach: https://i.stack.imgur.com/HHI2U.png However, it is indicating that the property titledoes not exist in this type. See here: https://i.stack.imgur.com/VZIIg.pn ...