Paper-textarea Is Readonly in AngularDart Component

Issue

I got a paper-dialog to work fine with paper-input in an AngualrDart component. When I tried a paper-textarea, it is read only.

Here is a working paper-input and the read-only paper-textarea:

<paper-input #artistInputDeath type="text" ngDefaultControl
          [(ngModel)]="death_year" ngControl="artistInputDeath"
          label="Death Year" required allowed-pattern="[0-9]" maxlength="4"
                  (keyup.enter)="onDialogSubmit(true)">
    {{ death_year }}
</paper-input>

<paper-textarea #artistInputNotes type="text" ngDefaultControl readonly="false"
                   [(ngModel)]="notes" ngControl="artistInputNotes"
                   label="Notes"
                   (keyup.enter)="onDialogSubmit(true)">
  {{ notes }}
</paper-textarea>

If I put notes in value=””, nothing appears. I’ve tried removing various options to no effect. In the Dartium inspector this is what it shows for the field:

<paper-textarea _ngcontent-dye-5="" label="Notes" ngcontrol="artistInputNotes" ngdefaultcontrol="" readonly="false" type="text" class="ng-untouched ng-valid ng-pristine">
  Hard bop, soul jazz, grove.
  Given name is Julian Adderley
</paper-textarea>

Could it be that paper-textarea doesn’t work with angular?

Solution

It kinda helps if you import the right libraries. I assumed the paper-input libraries were sufficient since the documentation for paper-textarea was part of paper-input. I added this to my controller:

import 'package:polymer_elements/paper_textarea.dart';

and this to my index.html:

<link rel="import" href="packages/polymer_elements/paper_textarea.html">

Answered By – curt

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.