Angular validator doesnt work when text is inserted into textarea

Question

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 class="bordered">
        <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;
          });
      
  }

I don't think you should use value="{{visit.ENotes}}" remove it. (and set the value on your form this.form.get('notes').setValue(somevalue);). And what does that onChanges method do? Just start listening to your form changes in your OnInit. — user3791775
– user3791775, Commented Oct 25, 2022 at 23:09
@user3791775 Thanks! Im not sure I understand specifically what you mean by "start listening to your form change in your OnInit" -- I know the OnInit method, but what are you saying to add to it? The problem is that its only detecting if a user Types in the textarea, but its not detecting when text is inserted from a button. — angleUr
– angleUr, Commented Oct 26, 2022 at 15:39

Joar Krohn Mauseth · Accepted Answer · 2022-10-26 18:39:03Z

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.

Collectives™ on Stack Overflow

Angular validator doesnt work when text is inserted into textarea

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related