Нужен совет по [formGroup] formGroupName, [formControl] formControlName - PullRequest
Новая
       30

Нужен совет по [formGroup] formGroupName, [formControl] formControlName

0 голосов
/ 16 ноября 2018

Я смотрю на существующий ответ на вопрос В чем разница между formControlName и FormControl?

и все еще изо всех сил пытаюсь полностью понять, когда использовать [formControl] над formControlName.

Правильно ли я сделать вывод [основываясь на комментарии @Paul Samsotha], что когда я создаю элемент управления с помощью FormBuilder, аналогичный 

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

, тогда я должен использовать что-то вроде 

<form [formGroup]="myForm">

  <label>
    First Name:
    <input type="text" formControlName="fullname">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="gender">
  </label>

</form>

и если я хочу объявить свою форму следующим образом (на основе @ Günter Zöchbauer ansewer): 

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': new FormControl('');
        'gender': new FormControl('')
    });
}

используйте следующий синтаксис: 

<form [formGroup]="myForm">

  <label>
    First Name:
    <input type="text" [formControl]="fullname">
  </label>

  <label>
    Last Name:
    <input type="text" [formControl]="gender">
  </label>

</form>

Выше корректно?Также то же самое для [formGroup] и formGroupName: Когда бы вы использовали formGroupName поверх [formGroup]? Я не мог придумать пример для этого .Можете ли вы объяснить, почему один может использовать один над другим или какова рекомендуемая практика (если есть)?

1 Ответ

0 голосов
/ 16 ноября 2018

Обычно вы используете [formControl] или [formControlName], когда ваша форма является динамической, когда у вас есть фиксированная форма, вы просто используете formControlName.

Это происходит потому, что структура [] в angular является односторонней привязкой, поэтому она продолжает отслеживать значение любого свойства, которое есть в вашем компоненте.

  • [formControl] = "propertyInComponent "
  • [formControlName] =" propertyInComponent "
  • formControlName =" nameGivenByYou "
...