angular 2 formbuilder условная проверка ввода

Я использую angular 2 formbuilder для создания формы, и я хочу условно проверить поле ввода в соответствии с изменениями ввода радиобокса. Когда я нажимаю процентный радиоблок, процентный ввод должен быть подтвержден. Когда я нажимаю переключатель суммы, он должен проверить поле ввода суммы.

HTML код

(Я использую компоненты ввода материала)

<md-radio-group formControlName="splitType" (click)="splitTypeClicked()">
      <md-radio-button value="amount">Amount</md-radio-button>
      <md-radio-button value="percentage">Percentage</md-radio-button>
</md-radio-group>
  
<input  mdInput  placeholder="Amount" formControlName="amount"  >
<input  mdInput   placeholder="Percentage" formControlName="percentage"  >

Угловой 2 компонент

constructor(private fb: FormBuilder){}
   
  ngOnInit() {

    this.splitChargeForm = this.fb.group({
      splitType: ['', Validators.required],
      amount: [''],        //validate when splitType = amount
      percentage: ['']     //validate when splitType = percentage

   });

angular reactive-forms angular2-formbuilder
person Manoj Sanjeewa    schedule 26.07.2017    source источник
comment
вы скрываете / показываете и отключаете / включаете ввод по клику?   -  person Shailesh Ladumor    schedule 26.07.2017
comment
да скрыть / показать при нажатии переключателей   -  person Manoj Sanjeewa    schedule 26.07.2017
comment
хорошо, я обновляю свой ответ   -  person Shailesh Ladumor    schedule 26.07.2017
comment
вы можете попробовать второе решение   -  person Shailesh Ladumor    schedule 26.07.2017

Ответы (1)


arrow_upward
6
arrow_downward

напишите этот код в ngOnInit() метод. это помогает

Решение 1.

 this.splitChargeForm.get('splitType')
      .valueChanges.subscribe((value: string) => {
          if (value === 'amount') {       
               this.splitChargeForm.get('amount').setValidators(Validators.required);
               this.splitChargeForm.get('percentage').clearValidators()
          } else {
              this.splitChargeForm.get('percentage').setValidators(Validators.required);
              this.splitChargeForm.get('amount').clearValidators()
        }
    });

Решение 2:

// formBuilder

  this.splitChargeForm = this.fb.group({
      splitType: ['', Validators.required],
      amount: [{value: '', disabled: false}, Validators.required], 
      percentage: [{value: '', disabled: true}, Validators.required]
   });

// включение и отключение ввода (запись в методе onInit () или в cunstructor)

this.splitChargeForm.get('splitType')
          .valueChanges.subscribe((value: string) => {
              if (value === 'amount') {       
                   this.splitChargeForm.get('amount').enable;
                   this.splitChargeForm.get('percentage').disable();
              } else {
                  this.splitChargeForm.get('percentage').enable();
                  this.splitChargeForm.get('amount').disable()
            }
        });

HTML должен быть похож на

<md-radio-group formControlName="splitType" (click)="splitTypeClicked()">
      <md-radio-button value="amount">Amount</md-radio-button>
      <md-radio-button value="percentage">Percentage</md-radio-button>
</md-radio-group>

<input  mdInput  placeholder="Amount" formControlName="amount" *ngIf="splitChargeForm.value.splitType === 'amount" >
<input  mdInput   placeholder="Percentage" formControlName="percentage"  *ngIf="splitChargeForm.value.splitType === 'percentage" >
person Shailesh Ladumor    schedule 26.07.2017
comment
это действительно исчерпывающий ответ! Спасибо за ваше время. - person Manoj Sanjeewa; 26.07.2017