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

Viewed 3150

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.

my code is

      <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?

2 Answers

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.

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>
Related