首页 文章

当Angular5中的字段为空时禁用该按钮[无效格式]

提问于
浏览 次
0

我正在学习Angular5，这是新手 .

我有两个输入字段，一个按钮 . 对这两个字段进行处理的验证，一旦输入两个字段，将启用该按钮 . 我在窗体无效时禁用了按钮 . 但它没有用 .

<form class="customerRegisteration-form">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

如果有什么不对，请帮助我 .

提前致谢 .

angular angular-validation

2 回答

  • 1

    您的表单应该有一个formGroup

    <form  [formGroup]="customerRegisteration">

    要么

    <form class="customerRegisteration-form" #customerRegisteration="ngForm">

    然后，

    <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
    回复于
  • 1

    您只需在标签中添加 #customerRegisteration="ngForm" ，如下所示

    <form class="customerRegisteration-form" #customerRegisteration="ngForm">

    完整的代码是

    <form class="customerRegisteration-form" #customerRegisteration="ngForm">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

    注意 . 我建议你阅读Angular Forms Article以及你对角形有很多疑问

    回复于

相关问题