Показать поле на основе выбранной опции - Реактивная форма - PullRequest
Новая
       0

Показать поле на основе выбранной опции - Реактивная форма

1 голос
/ 26 января 2020

Я пытаюсь показать поле на основе выбранной опции "США". Я работаю над созданием динамических c реактивных полей формы, но не могу показать и скрыть поле на основе выбранной опции. Это то, что я пробовал.

AppComponent html: 

<form [formGroup]="myForm">
  <div
    formArrayName="formArray"
    *ngFor="let formArr of myForm.get('formArray').controls; let i = index"
  >
    <div [formGroupName]="i" style="margin-bottom: 10px;">
      <label for="name"> First name Name:</label>
          <input  formControlName="firstName"  placeholder="First name">
<label for="name">Last name :</label>
          <input   formControlName="lastName"  placeholder="Last name">

          <select formControlName="countries" [(ngModel)]="selectCountry" (ngModelChange)="onChange($event)" >
      <option *ngFor="let c of countries" [ngValue]="c"> {{c.name}} </option>
    </select>
        <div *ngIf="showPostcode">
              <label for="name"> Post Code </label>
          <input  formControlName="postcode"  placeholder="Post code"> // this field what i'm trying to show or hide
          </div>

      </div>
      <button (click)="addForm()">Add new form</button>
      <br /><br />
    </div>
  </div>
  <button (click)="SubmitApp()">Button</button>

  <br />
  <br />
  <div style="border-style: dashed;"></div>
</form>

ts: 

export class AppComponent implements OnInit {
showPostcode = false;
    constructor(private fb: FormBuilder) { }


  ngOnInit() {
    this.myForm = this.fb.group({
      formArray: this.fb.array([this.createItem()]),
    });
  }

createItem() {
    return this.fb.group({
      firstName: [""],
      lastName: [""],
      countries: [""],
      postcode:[""]
    });
  }


  addForm() {
    this.formArray = this.myForm.get("arr") as FormArray;
    this.formArray.push(this.createItem());
  }


onChange(country)
{
if(country.name == "usa")
this.showPostcode = true;
}

}

Ps: Помните, что я могу создать несколько полей, используя "добавить новое поле" кнопка». Нужна помощь, пожалуйста.

1 Ответ

1 голос
/ 26 января 2020

Краткий ответ. Используйте: 

<div *ngIf="formArr.get('countries').value=='usa'">

Но позвольте мне кое-что объяснить:

Во-первых, Дэвид НЕ использует ни [ngModel], ни (ngModelChange) в вводе, который вы используете formControlName. Если вы хотите получить доступ к значению formControl, используйте методы для получения значения formControl.

Ну как доступ к этому значению? в общем, мы используем способ 

nameMyform.get('nameOfControl').value

Когда вы используете массив Form, вы можете сделать что-то вроде 

myForm.get('formArray').at(i).get('countries')

Ну, на самом деле вы не можете сделать это, если вы делаете сборку ng --prod выдает ошибку. Когда мы используем FormArray, используем метод получения для получения значения массива 

get myArray()
{
    return this.myForm.get('formArray') as FormArray
}

Вы перебираете 

<div formArrayName="formArray">
    <div *ngFor="let formArr of myArray.controls; let i = index"
         [formGroupName]="i" style="margin-bottom: 10px;"  >
         ....
    </div>
<div >

(см. «div» Я повторяю, это "div" formGroup, а не div formArrayName =

И использовать 

myArray.at(i).get('countries').value

Но вы можете использовать переменную итерации, да, ваша переменная formArr из "let formArr of ..." является формой группы, поэтому вы можете использовать 

formArr.get('countries').value

Ну, не так быстро, вы используете <option *ngFor="let c of countries" [ngValue]="c">. Это означает, что значение вашего myArray .at (i) .get ('страны') - это "целый" объект "c" - я хочу сказать, что вы хотите сказать [ngValue]="c.name" или "c .ISOName" или что-то подобное.

...