Ionic my button does not show title text how can I solve it?-CodePudding

I'm doing a login form using ngx-translate and all components seem to translate properly. The problems is when the submit button does not show its translate text. When its put hardcoded works or either when you click at him it also works. Anyone does know if this is a bug or something I'm missing out?

Video: Click me

HTML Code:

<form (ngSubmit)="login()" [formGroup]="credentials" >
<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
]

CodePudding user response：

You must initialize the form group using a builder for 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 you don't do so you must have some errors in the console and the translate service won't work as expected.