Search code examples
angularvalidationangular-formsproperty-binding

disabled property of button binding not working angular 4

Im curious on my syntax.

By the documentation and examples I have found online, the button in my form should be disabled if my form is not valid. However the buttons disabled property is not affected by my form css logic.

the html: 

 <form (ngSubmit)="addcity()" #cityform ="ngForm">
      <input type="text"
             placeholder="add a city"
             id="cityadd"
             name="cityadd"
             ngModel
             pattern="([A-Z][a-z]*(\s[A-Z][a-z]*)*)"
             #formcitycss ="ngModel">
      <button type="submit" [disabled]="!formcitycss.valid" >Add City</button>
    </form>

this should work but it isn't. What am I doing wrong as far as syntax because I feel like I am spot on

Solution

  • Try to bind it to the actual form instead of the single input.

    [disabled]="! cityform.valid"