Angular validator doesnt work when text is inserted into textarea-CodePudding

The child component e-notes-p-quick-phrases-list has a mat-grid-list that when the user clicks on, can then click an Insert button that inserts that text into the textarea "notes" in the parent component.

However, even though it successfully Inserts it, the form is still considered invalid since the user has not typed in the textarea.

How can I get the form to detect that text was inserted into the textarea and change the validator to be true?

I cant seem to find anything about this when I search.

HTML (parent):

<form [formGroup]="form" (ngSubmit)="save({ methodName: 'setV', visit: $event })">
    <mat-form-field >
        <textarea matInput formControlName="notes" value="{{visit.ENotes}}"
                              placeholder="E Notes" rows="5" id="DropHere"></textarea>
    </mat-form-field>
                
    <div>
        <e-notes-p-quick-phrases-list [vId]='this.vId' (newItemEvent)="addItem($event)"></e-notes-p-quick-phrases-list>
    </div>
</form>

TS (parent):

createForm() {
    this.form = this.fb.group({
      'pD': [this.selectPValue, Validators.compose([Validators.required, ValidatorsLibrary.autocompleteSelect(this.issues)])],
      'sD': [this.selectSValue, AutocompleteValidator.selectNotRequired(this.issues)],
      'notes': [this.v.ENotes, Validators.compose([Validators.required])],

    });
    this.onPageLoad();

  }

I also tried adding an on-focus to the textarea but it is not getting triggered:

HTML:

<textarea matInput formControlName="notes" value="{{v.ENotes}}"
                          placeholder="E Notes" rows="5" id="DropHere" on-focus="onChanges()"></textarea>

TS:

onChanges() {
    
      this.form.get('notes').valueChanges
          .subscribe(pd => {
              this.form.get('notes').markAsTouched;
          });
      
  }

CodePudding user response：

As mentioned in this comment, remove the value="{{visit.ENotes}}". You should not bind the value to something while also providing a form control directive. Instead, call setValue on your form control in the event handler for newItemEvent. Also remember to call updateValueAndValidity In your addItem method do like so:

(TS) Parent:

addItem(newItemEvent: ??): void {
  this.form.get('notes').setValue(newItemEvent.ENotes);
  this.form.get('notes').updateValueAndValidity();
}

For the purpose of subscribing and listening to form changes, the OnInit method is better suited than OnChanges. OnChanges is triggered whenever there are changes made to @Input properties of your component. If your parent component receives inputs, your OnChanges method will re-run whenever these change and subscribe to the form once more.

I know the question relates to a non working validator, but I could not help to notice that there is no button triggering a submit action on the form. I believe you need a <button type="submit"> within the form tag.