Как получить доступ к значению FormControl в дочернем компоненте для родительского компонента?
В моем угловом приложении есть родительский компонент и несколько дочерних компонентов.
У меня есть кнопка "Отправить" в моем родительском компоненте, которая отключена OnInit. Его следует включать только тогда, когда установлен флажок в одном из дочерних компонентов. Если флажок не установлен, кнопка должна оставаться неактивной.
Вот мой родительский компонент HTML. Я пытаюсь отключить кнопку, если флажок не установлен:
<form [formGroup] = "emailForm" (ngSubmit) = "onSubmit()" class = "form-horizontal">
<app-conditions (formReady) = "formInitialized('conditions', $event)"></app-conditions>
<app-damage-details-one (formReady) = "formInitialized('damageDetailsOne', $event)"></app-damage-details-one>
<app-damage-details-two (formReady) = "formInitialized('damageDetailsTwo', $event)"></app-damage-details-two>
<app-personal-info></app-personal-info>
<app-send></app-send>
<card>
<card-footer>
<button button class = "axis-btn" type = "submit" title = "Confirm and send" data-kind = "primary"
[disabled] = "emailForm.conditions.acceptTerms.checked === false">Confirm and send</button>
</card-footer>
</card>
</form>
Флажок, на который я пытаюсь сослаться, расположен ниже (conditions.component.html).
условия приложения в моем Родителе относится к этому ребенку:
<div [formGroup] = "conditionsForm">
<card>
<card-body>
<div class = "form-group">
<label class = "control-label" for = "Accept">{{lblAccept} </label>
<checkbox formControlName = "acceptTerms" cid = "Accept" heading = "Accept" name = "Accept" value = "Accept">
</checkbox>
</div>
</card-body>
</card>
</div>
Может кто-нибудь сказать мне, какие изменения мне нужно внести, чтобы я мог включать/отключать кнопку в родительском элементе в зависимости от того, установлен ли флажок в дочернем элементе или нет? Большое спасибо
Ответы 3
Используйте свойство Angular Output
Согласно официальному угловому документация:
The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.
Я обновил свой родительский компонент следующим кодом:
<button axis-button class = "axis-btn" type = "submit" title = "Confirm and send" data-kind = "primary"
[disabled] = "emailForm.controls['conditions'].controls['acceptTerms'].value === false">Confirm
and send</button>
Кнопка родительского компонента теперь активна только тогда, когда установлен флажок дочернего компонента.
Ниже показано, что вам нужно в дочернем компоненте, чтобы зафиксировать, когда флажок установлен, и зафиксировать это в родительском компоненте.
Для получения дополнительной информации: https://angular.io/guide/component-interaction
1)@Output() change: EventEmitter<string> = new EventEmitter<string>();
2)Also add a method that emits change when checkboxchange event occurs
OnCheckBoxChecked(value: string) {
this.change.emit(value);
}