CODEWITHSUNDEEP
c#.netinputblazorplaceholder
OuttaSpaceTime
OuttaSpaceTime

Reputation: 976

How to set placeholder for InputText with bind-Value for formsubmit?

I am trying to build a InputText for Blazor which holds a placeholder if the skill is yet null so is created as a new one, since I want to use the same razor component for edit and create new skill:

      <div class="form-group">
        <label>Skillname</label>
        @if (Skill == null)
        {
          <InputText class="form-control" placeholder="Enter Skillname" @bind-Value="Skill.Name"/>
        }
        else
        {
          <InputText @bind-Value="Skill.Name" class="form-control"/>
        }
      </div>

I tried to set placeholder=".." without having any effect. After research I found that they were using placeholder here even though it is not working for me.

I only found this possibility with telerik front end framework.

I was not able to find any reference to placeholder in the documentation.

Andy idea why placeholder is not working here or if there is any other workaround to achieve this?

Upvotes: 7

Views: 10816

Answers (2)

Stefan Gabor
Stefan Gabor

Reputation: 467

There is no intellisense and that is what confuses people. However, if you just use the placeholder attribute it will work.

<InputText id="lastName" class="form-control" placeholder="Last Name" @bind-Value="EmployeeVM.LastName"></InputText>

Upvotes: 14

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30074

You're binding to @bind-Value="Skill.Name" so I'm assuming Skill isn't null. Your test is on skill, not skill.Name, so is never null you always hit the else option. Try:

  @if (string.IsNullOrEmpty(skill.Name))
    {
        ......
    }

And you get:

enter image description here

However, you don't need to do any of this as the placeholder will only display when the field is empty.

Upvotes: 4

Related Questions