I can't see the title text on my Ionic button, what should I do to fix this issue?

I have been working on a login form using ngx-translate and all components are translating correctly except for the submit button. It seems that the translated text for the button does not display unless it is hardcoded or clicked on. I'm not sure if this is a bug or if there is something missing in my code. Can anyone help me figure this out?

Video: Click here

HTML Code:

<form (ngSubmit)="login()" [formGroup]="credentials" class="center">
<ion-item fill="outline" style="margin-top: 16px;">
  <ion-label position="floating">{{ "email" | translate }}</ion-label>
  <ion-input formControlName="email"></ion-input>
</ion-item>
<ion-item fill="outline" style="margin-top: 16px;">
  <ion-label position="floating">{{ "password" | translate }}</ion-label>
  <ion-input formControlName="password"></ion-input>
</ion-item>
<ion-button type="submit" expand="block" style="margin-top: 16px; height: 55px;">{{ 
"signin" | translate }}</ion-button>
</form>

.ts Imports:

imports: [
CommonModule,
IonicModule,
RouterModule,
TranslateModule,
ReactiveFormsModule
]

Answer №1

To properly set up the form group, make sure to initialize it using a builder. Here is an example:

constructor(private modalController: ModalController, private formBuilder: FormBuilder) { }

ngOnInit() {
this.credentials = this.formBuilder.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]]
})
}

If this step is skipped, you may encounter errors in the console and the translate service will not function as intended.

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

If my PHP code is causing a break, then isset will

I am facing an issue while constructing a SQL statement using variables posted on a previous page. The specific SQL statement, reflecting the posted values in a div using echo, is causing trouble for me. <?php if (isset($_POST['locationName&ap ...

Ways to implement CSS with javascript

I'm using PHP to retrieve data from my database and then leveraging Javascript to enable users to add it. However, I am facing challenges in making a div change its background color and apply borders. <div class="displayedItems"></div> &l ...

Items positioned to the left will not overlap

Having trouble with floating elements? Need to ensure that box 3 aligns under box 1 when resizing the browser window? Use this HTML template: <div class="box"> <p>box 1</p> <p>box 1</p> <p>box 1</p> & ...

When the browser screen is minimized, the menu bar toggler in my Angular project stops functioning properly. I rely on Bootstrap features within Angular to handle this

When the browser is at full-screen mode, HTML works perfectly. However, when I resize the browser to a smaller size, the navbar disappears and a toggle is shown - which is the expected behavior. If I click on the toggle, the menu list should be displayed ...

I encountered an error during compilation after copying code from a different system. Any suggestions on how to troubleshoot and resolve this issue?

An error occurred while trying to build the styles for this project. The system could not find a necessary binding for Node Sass in your current environment, specifically on Windows 64-bit with Node.js 10.x. The bindings were found for Windows 64-bit with ...

Following my ajax submission, the functionality of my bootstrap drop-down menu seems to have been compromised

I'm having an issue with my login page. After implementing Ajax code for the reset password feature, the dropdown menu on the login page doesn't work properly when wrong details are entered and the page reloads. I've tried using the $(' ...

Navigating through different pages in Angular2 using Asp.net 4.5

I am in need of assistance. I recently switched back to using ASP.NET 4.5 from developing with Angular2 and ASP.NET Core, and I am facing a major issue with routing. When I was using ASP.NET Core, redirecting all 404 requests to index.html was simple with ...

Showcasing an image stored in an HTML file on a Vue.js webpage

I'm currently facing an issue with displaying a local image saved in an HTML file on my Vue.js page. I attempted to store the content of the HTML file into a variable using the code below: computed: { compiledHtml: function() { return this.a ...

The typeface displayed is Rubik Light Font instead of the regular Rubik font

I am currently working on incorporating the Rubik Font into my project: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> < ...

The act of updating Angular 2 to Angular 4 has resulted in an issue where the 'AnimationDriver' member is not being exported

After upgrading my Angular 2 to Angular 4, I encountered an error message when running my project: The module 'node_modules/@angular/platform-browser/platform-browser' does not have the exported member 'AnimationDriver'. ...

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

Incorporate an icon into a text input field using Material UI and React

I have a form with a text input element: <FormControl className='searchOrder'> <input className='form-control' type='text' placeholder='Search order' aria-label='Search&ap ...

You can utilize the Toggle Button to alternate between multiple classes, not just two

Currently, I am learning Java with Spring Boot and Thymeleaf. While creating some views, I faced a challenge. Initially, I wanted to create a toggle button for "Pending" and "Received". However, now I am attempting to add the option "Cancelled", but I have ...

Responsive SmoothSlider

Need help fixing the responsive breadcrumbs in my slick slider. The slick-content-slider is taking a strange height and I want to ensure that every div remains on the same line. Thank you in advance! $('.slick-content-slider').slick({ slides ...

When all y values are zero, Highcharts.js will shift the line to the bottom of the chart

Is there a way to move the 0 line on the y axis to the bottom of the chart when all values are 0? I attempted the solution provided in this post without success. Highcharts: Ensure y-Axis 0 value is at chart bottom http://jsfiddle.net/tZayD/58/ $(functi ...

Using CSS Classes with PHP Variables in Conditionals: A Handy Guide

I have limited experience in programming and I'm attempting to edit a .php file within a Wordpress theme. Please keep this in mind as I explain my issue. Within the theme, there is code that calculates the average score from 1 to 10 and then displays ...

Creating nested Angular form groups is essential for organizing form fields in a hierarchical structure that reflects

Imagine having the following structure for a formGroup: userGroup = { name, surname, address: { firstLine, secondLine } } This leads to creating HTML code similar to this: <form [formGroup]="userGroup"> <input formCon ...

Obtain the firebase object using Angular framework

Hey there, I've been working on retrieving a Firebase object using Angular and have successfully achieved that. However, I'm now faced with the challenge of how to navigate deeper into the data that is being returned (check out the images linked ...

Exploring the asynchronous for loop functionality in the express.js framework

I'm attempting to use a for loop to display all images. I have stored the paths of the images in an array called Cubeimage. However, when trying to display them using <img>, I encountered an error. How can I write asynchronous code to make it wo ...

What is the best way to execute a function after an Angular get method finishes retrieving data?

My MongoDB GET function takes a few seconds to fetch data. However, the function that should run next and work on the fetched array of objects does not wait for the array, resulting in an error. Is there a way to ensure that the next function runs only aft ...