Question

如何获取角度2表单验证表单值。我没有执行验证部分，但没有工作，有人可以解决此问题吗？ https://stackblitz.com/edit/angular2-notifications-example-nc4jgr?file=app/app.component.ts

Answer 1

示例您可以添加“金额”输入标签：

 <input type="number" class="form-control" name="minAmount" [(ngModel)]="minAmount"/>

并删除该formcontrol。并在最大添加相同只是不同的名称。并在底部添加

<p *ngIf="!minAmount && !maxAmount" class="error">Please enter max and min amount</p>

打开按钮：

<button (click)="clickSuccess()" type="submit" class="btn btn-success">Success</button>

在TS中：

minAmount:number=null;
maxAmount:number=null;

clickSuccess(){
if(!this.minAmount || !this.maxAmount)
return false;

return true;
}

Answer 2

这不是很好的解决方法，但是很快。它可以帮助您验证一些较小的表格。我只修复输入的最小值和最大值...如果您需要更多帮助，请询问。 HTML

<div class="container">

        <div class="row padding-top-xl">

            <div class="col-sm-8"> 
    <form>
        <div class="form-group">
        <div class="row">
        <label class="col-3 control-label">Place Name</label>
        <div class="col-5">
        <select class="form-control" name="placeName" [(ngModel)]="placeName">
          <option [ngValue]="">Select</option>
          <option *ngFor="let place of places" [ngValue]="place">{{place}}</option>
          </select>
          <p *ngIf="placeName" class="error">Please select place name</p>
        </div>
        </div> 
        </div>

        <div class="form-group">
        <div class="row">
        <label class="col-3 control-label">Gender</label>
        <div class="col-6">
        <div class="row">
        <div class="radio col-6">
            <label>
                <input type="radio" name="gender" value="male" [(ngModel)]="gender"/> Male
            </label>

        </div>
        <div class="radio col-6">
            <label>
                <input type="radio" name="gender" value="female" [(ngModel)]="gender"/> Female
            </label>
        </div> 
        <p class="error">Please choose gender</p>
        </div>
        </div> 
        </div>
        </div>

        <div class="form-group">

        <p>Amount</p> 
        <div class="row">
        <label class="col-3 control-label">Min</label>
        <div class="col-3">
          <input type="number" class="form-control" name="minAmount" [(ngModel)]="minAmount"/> 
          <p *ngIf="!minAmount" class="error">Please enter min and min amount</p>
        </div>
        <label class="col-2 control-label">Max</label>
        <div class="col-3"> 
            <input type="number" class="form-control" name="maxAmount" [(ngModel)]="maxAmount"/>  
            <p *ngIf="!maxAmount" class="error">Please enter max and max amount</p>
        </div>  
        </div>

        </div>
  </form>
      </div> 

      <div class="col-sm-4 margintop">
      <button  class="btn btn-success" (click)="submitform()">Success</button>
      </div>

    </div>



</div> 
<appfooter></appfooter>

TS

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup,Validators } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit  {
  myform;

  minAmount:number=null;
maxAmount:number=null;
placename;
placenerrorame:boolean=false;
gender;


  constructor( private _fb: FormBuilder) { }

  places = ['UK', 'USA'];

  ngOnInit() {
  }

  submitform(form){

// if(!this.placename){
//  // this.placenerrorame=true;
//   return true;
// }

    //  if(!this.gender){
    //  return true;
    // }

    if(!this.minAmount || !this.maxAmount){
     return false;
    } 



  //  if(!this.myform.valid){
  //    alert("Form Not valid");
  //  }
  //  else{
  //    alert("Form valid");  




  }


}

如何通过角度2获取表单值

2 个答案: