Как получить значения формы по углу 2 - PullRequest
Новая
       33

Как получить значения формы по углу 2

0 голосов
/ 04 октября 2018

Как получить угловые 2 значения формы проверки формы. Я сделал, но не работает часть проверки, кто-нибудь может решить эту проблему?https://stackblitz.com/edit/angular2-notifications-example-nc4jgr?file=app/app.component.ts

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Это не отличное решение, но это быстро.Это может помочь вам проверить некоторые меньшие формы.Я фиксирую только вводы min и max ... Если вам нужна дополнительная помощь, спросите.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");  




  }


}
0 голосов
/ 04 октября 2018

Пример, который вы можете добавить в тэг Amount input: 

 <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;
}
...