*ngIf is rendering two blocks

Asked

Viewed 53 times

0

I am doing a validation of inputs, where if the user selects the X-bank, the account field will have at least 5 characters and at most 11, if you choose the Y-bank, the field will have at least 5 characters and at most 5. This is the div:

//Banco X
<div *ngIf="form.get("id_banco")?.value !== codigo_y">
  <input
    maxlength="11"
    minlength="5"
    formControlName="conta"
  >
</div>

//Banco Y
<div *ngIf="form.get("id_banco")?.value === codigo_y">
  <input
    maxlength="5"
    minlength="5"
    formControlName="conta"
  >
</div>

If I select the X-bank, it accepts more than 5 characters, but displays an error message that I had placed and if I return with 5 characters, the error disappears. And if I change the Y-bank to accept 8 characters, in the X-bank it is also only valid with 8 characters. Any suggestions? If you need more information, you can tell me.

html angular typescript

  • I think you should give more information, although I think the problem is if’s, the comparison should be with strings ...value === 'codigo_y' " right?

  • try changing from: *ngIf="form.get("id_database")?. value !== code_y" to *ngIf="form.get('id_bank')?. value !== 'code_y'". Do this in the 2 inputs, probably this is just a typo, opening the ngif with double quotes and closing it when you will inform the parameter of the get function, use single quotes for the arguments you will pass after you have already opened the double quotes.

  • @Peace even code. y being a number would have to have the single quotes?

1 answer

1


If the only difference is maxlength, would be more succinct to do this:

<div>
  <input
    [maxLength]="form.get("id_banco")?.value === codigo_y ? 5 : 11"
    minLength="5"
    formControlName="conta"
  >
</div>

But as already said in the comments, check if the compared items have the same type.

  • It would be great guy, but it still didn’t work, I get an error "Opening tag "input" not terminated"...know if you need to import something in the app.module?

  • And the items are of type number, would not have problem with that...

  • The error you are having is typing... See if the > is present.

  • Yes, I tried to close the input tag, but still the same error

  • I found the error, missed the ' ' in the 5 and 11, Thank you!! It worked

  • Cool, I’m glad.

Show 1 more comment

Browser other questions tagged html angular typescript

You are not signed in. Login or sign up in order to post.