Как установить значение FormControl перед отправкой формы на сервер
Ниже у меня есть группа переключателей, которые показывают/скрывают текстовое поле.
If rdo1 is selected, show the textbox.
If rdo2 is selected, hide the textbox.
Это делается в моем методе updateShowTxtOtherCompanyName() ниже.
Вот моя проблема:
В настоящее время пользователь может ввести текст в текстовое поле, а затем выбрать rdo2. В этом случае текстовое поле скрыто, как и ожидалось. Но когда пользователь отправляет форму сейчас, значение в текстовом поле будет отправлено на сервер, а не нулевое значение.
Мой вопрос: как мне установить значение моего текстового поля равным нулю внутри моего метода updateShowTxtOtherCompanyName()? т.е. если пользователь выбирает rdo2, то значение ДругоеНазваниеКомпании должно быть нулевым
Я скрываю текстовое поле с помощью этого кода:
<radio-button-wrapper formControlName = "damageReported" name = "damageReported">
<radio heading = "Yes" value = "Yes" data-orientation = "inline" cid = "damageReportedYes" name = "damageReportedYes" (click) = "updateShowTxtOtherCompanyName('show')">
</radio>
<radio heading = "No" value = "No" data-orientation = "inline" cid = "damageReportedNo" name = "damageReportedNo"(click) = "updateShowTxtOtherCompanyName('hide')">
</radio>
</radio-button-wrapper>
<div *ngIf = "showTxtOtherCompanyName ">
<input formControlName = "otherCompanyName" id = "otherCompanyName" type = "text" [required] = "showSelfRiskAmount === true" />
</div>
.тс
updateShowTxtOtherCompanyName(show: string): void {
if (show === 'show') {
this.showTxtOtherCompanyName = true;
} else {
this.showTxtOtherCompanyName = false;
// TODO: need to set otherCompanyName to null here
}
}
Ответы 2
Просто отключите его.
<div [show] = "showTxtOtherCompanyName ">
<input formControlName = "otherCompanyName" id = "otherCompanyName" type = "text" [required] = "showSelfRiskAmount === true" [disabled] = "showTxtOtherCompanyName " />
</div>
Отключенные поля не будут возвращены свойством myForm.value. Если вы хотите их, вам придется использовать myForm.getRawValue().
Я добавил [disabled] = "showTxtOtherCompanyName, как показано выше, но он по-прежнему работает так же, как и предыдущий. OtherCompanyName все еще публикуется
@user9847788 user9847788 действительно, вы должны сделать это в TS, забыл эту часть. Проверьте это в действии !
Используйте setValue(), как показано ниже -
updateShowTxtOtherCompanyName(show: string): void {
if (show === 'show') {
this.showTxtOtherCompanyName = true;
} else {
this.showTxtOtherCompanyName = false;
// TODO: need to set otherCompanyName to null here
this.otherCompanyName.setValue(null);
}
}
Спасибо за Ваш ответ. Вот где я объявляю otherCompanyName: ngOnInit() { this.damageDetailsTwoForm = this.fb.group({ injuryType: new FormControl('Bumps, scratches & damage', Validators.required), damageReported: new FormControl('Yes', Validators.required), otherCompanyName: new FormControl(), }); }
Я использовал ваш код вот так this.damageDetailsTwoForm.controls['otherCompanyName'].setValue(null);, но это не решило проблему. Он все еще публикует значение
Попробуйте так: this.damageDetailsTwoForm.controls.otherCompanyName.setValue(null);
Если я использую .getRawValue(), будут ли отключенные поля публиковать нулевой?