I'm currently facing an issue with updating the text area value based on the selection from a dropdown menu. Below is the design of the dialog:
https://i.sstatic.net/67U1M.png
Here's the code snippet I've incorporated for this functionality:
<div class="modal-content">
<div class="modal-header">
<h5>Send Text Message</h5>
</div>
<div class="sub-title">
<b>SELECT MESSAGE TEMPLATE:</b>
</div>
<form>
<div>
<select name="textmessage" class="select" [(ngModel)]="selectedMessageContentType" (change)="getSelectedTextMessage()">
<option *ngFor="let messageContentType of messageContentTypes" [value]="messageContentType">
{{messageContentType.messageDescription}}
</option>
</select>
</div>
<br>
<div>
<textarea #textmessagecontent [(ngModel)]="selectedMessageContentType.messageContent" class="textarea" maxlength="5000" type="text" name="textmessagecontent" disabled></textarea>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary font-weight-bold" (click)="onSendMessageClicked()">SEND</button>
<button type="button" class="btn btn-primary font-weight-bold" (click)="onCancelClicked()">CANCEL</button>
</div>
Below is the TypeScript component:
import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { IssueService } from '../../../../services/issue.service';
import { IssueTextMessageRequestInput, IssueMessageContent } from "../../../../models/inputs/issue.model";
@Component({
selector: 'textmessage',
templateUrl: './textmessage.component.html',
styleUrls: ['./textmessage.component.scss']
})
export class TextMessageComponent implements OnInit {
messageContentTypes : IssueMessageContent[] = [
{ contentId: 50, messageDescription: 'Change', messageContent: 'Change something.' },
{ contentId: 51, messageDescription: 'Send Baseline', messageContent: 'Send Base' },
{ contentId: 52, messageDescription: 'Adapter', messageContent: 'Change to Lead Wire Adapter' }
];
selectedMessageContentType: IssueMessageContent;
@Input() messageData: IssueTextMessageRequestInput;
constructor(private activeModal: NgbActiveModal, private issueService: IssueService) { }
ngOnInit() {
this.selectedMessageContentType = this.messageContentTypes[0];
}
onCancelClicked() {
this.activeModal.close();
}
getSelectedTextMessage() {
debugger;
this.textarea.nativeElement.innerText = "test";
}
onSendMessageClicked() {
this.messageData.message = this.getMessageContentById(this.selectedMessageContentType).messageDescription;
console.log(this.messageData);
/*this.issueService.processAndSendMessageWithIssueActivityTracking(messageData)
.subscribe((resp) => {});*/
}
getMessageContentById(msgId: number) {
return this.messageContentTypes.find(content => content.contentId === msgId);
}
}
I followed some tutorials but encountered the following problems:
- While triggering the "onchange" event, I noticed that 'this.selectedMessageContentType' displays as [object Object] and I cannot access its properties like 'contentId'. The result is always undefined.
- Even after changing the value of the text area to "test", the change doesn't reflect in the textarea.
Any help or guidance would be highly appreciated. Thank you in advance.