установите значение ngModel равным нулю после изменения выбранного параметра - PullRequest
Новая
       45

установите значение ngModel равным нулю после изменения выбранного параметра

1 голос
/ 31 октября 2019

У меня есть форма, которая содержит опцию выбора, а раздел div зависит от выбранной опции. в опции выбора, если я выберу 1 для примера, будет отображаться ввод

component.ts 

types : any[] = [
{ value : '1'},
{ value : '2'},
{ value : '3'}
];

createForm = this.fb.group({
firstInput:['',Validators.required],
secondInput:['',Validators.required],
thirdInput:['',Validators.required],
});

component.html 

<select class="form-control" [value]="selected"[(ngModel)]="selectedValue">
<option *ngFor="let x of types">{{x.value}}</option>
</select>

<div *ngIf="selectedValue == '1'">
<label for="1" class="control-label">1</label>
<input id="1" class="form-control" type="text" formControlName="firstInput">
</div>

<div *ngIf="selectedValue == '2'">
<label for="2" class="control-label">2</label>
<input id="2" class="form-control" type="text" formControlName="secondInput">
</div>

<div *ngIf="selectedValue == '3'">
<label for="3" class="control-label">3</label>
<input id="3" class="form-control" type="text" formControlName="thirdInput">
</div>

все поляТребуется, моя проблема: когда я выбираю «1» для примера без заполнения ввода «1», то я меняю второй вариант «2» и заполняю его, я не могу отправить форму, потому что fielControllName «firstInput»пустой несмотря на то, что он невидим, поэтому мне нужно очищать выбранное значение ngModel (как я думаю) с каждым изменением.

1 Ответ

1 голос
/ 01 ноября 2019

Итак, изначально ваша форма должна выглядеть следующим образом: 

createForm = this.fb.group({
  selectedValue:[null,Validators.required],
  firstInput:[null],
  secondInput:[null],
  thirdInput:[null],
});

Ваш HTML-код: 

 <form  [formGroup]="createForm">
    <select class="form-control" formControlName="selectedValue">
     <option *ngFor="let x of types" value="{{x.value}}">{{x.value}}</option>
    </select>

    <div *ngIf="createForm.value.selectedValue== '1'">
     <label for="1" class="control-label">1</label>
     <input id="1" class="form-control" type="text" formControlName="firstInput">
    </div>

    <div *ngIf="createForm.value.selectedValue== '2'">
     <label for="2" class="control-label">2</label>
     <input id="2" class="form-control" type="text" formControlName="secondInput">
    </div>

    <div *ngIf="createForm.value.selectedValue== '3'">
     <label for="3" class="control-label">3</label>
     <input id="3" class="form-control" type="text" formControlName="thirdInput">
    </div>
</form>

Тогда вы должны иметь при изменении Функция: 

    OnChange() {
        this.createForm.get('selectedValue').valueChanges.subscribe(
          val => {
            if (val==1) {
              this.createForm.get('firstInput').setValidators([Validators.required]);
              this.createForm.controls['firstInput'].updateValueAndValidity();
              this.createForm.get('secondInput').setValidators([]);
              this.createForm.controls['secondInput'].updateValueAndValidity();
              this.createForm.get('thirdInput').setValidators([]);
              this.createForm.controls['thirdInput'].updateValueAndValidity();
            }
            else if (val==2) {
              this.createForm.get('firstInput').setValidators([]);
              this.createForm.controls['firstInput'].updateValueAndValidity();
              this.createForm.get('secondInput').setValidators([Validators.required]);
              this.createForm.controls['secondInput'].updateValueAndValidity();
              this.createForm.get('thirdInput').setValidators([]);
              this.createForm.controls['thirdInput'].updateValueAndValidity();
            }
           else if (val==3) {
              this.createForm.get('firstInput').setValidators([]);
              this.createForm.controls['firstInput'].updateValueAndValidity();
              this.createForm.get('secondInput').setValidators([]);
              this.createForm.controls['secondInput'].updateValueAndValidity();
              this.createForm.get('thirdInput').setValidators([Validators.required]);
              this.createForm.controls['thirdInput'].updateValueAndValidity();
            }
          }
        )
      }

если вы хотите сделать значение null, вы можете использовать: 

this.createForm.patchValue({
  firstInput:null,
  secondInput:null,
  thirdInput:null,
})
...