Отличается между FormGroup и [FormGroup] с помощью скобок

Question

Я создаю Dyanmic Form в angular, и я все еще пытаюсь понять разницу между использованием FormGroup и [FormGroup] (с квадратными скобками) и FormControlName против [FormControlName]

Answer 1

Это фундаментальная концепция Angular для привязки свойства в шаблоне (см. документация ).С помощью скобок вы связываете переменную, которая объявлена ​​в вашем компоненте.Без скобок вы привязываете значение переменной.

Разница между formControlName против [formControlName] заключается в том, что в первом компоненте formControlName было объявлено в FormGroup в компоненте, во втором - в объявлении независимого FormControl в компоненте.

Пример:

@Component({
  selector: 'app-profile-editor',
  template: `
    <form [formGroup]="profileForm">
    <label>
        First Name:
        <input type="text" formControlName="firstName">
    </label>
    </form>
 `
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl('')
  });
}

@Component({
  selector: 'app-profile-editor',
  template: `
    <form>
        <label>
            First Name:
            <input type="text" [formControlName]="firstName">
        </label>
    </form>
 `
})
export class ProfileEditorComponent {
  firstName = new FormControl('');
}

Check Angular документация о реактивных формах .