ng각 2에서 작동하지 않는 텍스트 영역 모델

ng각 2에서 작동하지 않는 텍스트 영역 모델

다음을 사용하여 텍스트 영역에 json 개체를 인쇄하려고 합니다.ngModel.

다음 작업을 수행했습니다.

<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">                             
</textarea>

텍스트 영역에 json 개체를 로드하고 싶습니다.위의 코드가 로딩 중입니다.rapidPage텍스트 영역의 객체이지만 텍스트 영역 값을 나타내는 객체[object Object].

오브젝트:

 this.rapidPage = {            
        "pageRows": [
            {
                "sections": [
                    {
                        "sectionRows": [
                            {
                                "secRowColumns": [                                       
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "colName": "users"
                                    }
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "colName": "sample"
                                    }
                                ]
                            }
                        ],
                        "width": 0
                    }
                ]
            }
        ],
        "pageName": "DefaultPage",
        "pageLayout": "DEFAULT_LAYOUT",
        "editMode": true
    };

데이터를 문자열로 로드하고 싶습니다.입력은?

바인드하는 경우rapidPage유효한 JSON만 textArea에 씁니다.

• 할 필요가 있다PARSE값을 변경할 때 사용합니다.STRINGIFY텍스트 영역에 표시할 때 사용합니다.

---

StackBlitz 데모

컴포넌트 코드에서 다음을 수행합니다.

  rapidPage = {"pageRows":[{"sections":[{"sectionRows":[{"secRowColumns":[]},{"secRowColumns":[{"colName":"users"}]},{"secRowColumns":[{"colName":"sample"}]}],"width":0}]}],"pageName":"DefaultPage","pageLayout":"DEFAULT_LAYOUT","editMode":true}; 
  // your object

  get rapidPageValue () {
    return JSON.stringify(this.rapidPage, null, 2);
  }

  set rapidPageValue (v) {
    try{
    this.rapidPage = JSON.parse(v);}
    catch(e) {
      console.log('error occored while you were typing the JSON');
    };
  }

템플릿 사용:

<textarea [(ngModel)]='rapidPageValue' rows="30" cols="120">                             
</textarea>

<textarea class="form-control" 
          name="message"
          rows="8"
          [(ngModel)]="Obj.message"
          #message='ngModel'
          ></textarea>

양방향 바인딩의 경우 텍스트 영역 태그에 속성을 추가하면 됩니다.name="message",오직.[(ngModel)]100% 동작!

Angular 2에서 텍스트 영역 값을 바인딩하는 경우 변경 함수를 사용할 수 있습니다.

템플릿

<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea>

요소

export class AppComponent implements OnInit {
  private textareaValue = '';
  doTextareaValueChange(ev) {
    try {
      this.textareaValue = ev.target.value;
    } catch(e) {
      console.info('could not set textarea-value');
    }
  }
}

ngModel은 다음과 같이 동작합니다.

1. 양식이 둘러쳐져 있고 텍스트 영역에는 이름 속성이 추가됩니다.

그렇지 않으면 다음 구문을 사용하여 동일한 효과를 얻을 수 있습니다.

<textarea [value]="strVariableInComponent" (input)="strVariableInComponent = $event.target.value;"></textarea>

만약 정말로 동기화를 하고 싶지 않다면, 보통 json 편집이 끝나면 변경 내용을 저장/적용하는 버튼을 구현합니다.이 경우 렌더링은 간단합니다.

<textarea #textbox>{{ rapidPage | json }}</textarea>

위 행 사이에 공백이나 리턴 문자가 없는지 확인하십시오.

그리고 전통적인 버튼, 예.

<a (click)="updateRapidPage(textbox.value)">Apply</a>

어떤 경우에는 이게 잔인함보다 낫다는 걸 알았어[(rapidPage)].

를 사용할 수도 있습니다.@ViewChild('textbox') input컴포넌트 내부에서 이 변수에 액세스합니다.

이것으로 테스트할 수 있습니까?

<textarea #textbox (change)="text = textbox.value" style="width:100%;">{{ text }}</textarea>

안부 전해요

문서에 따르면 [()]는 보일러 플레이트를 제거하기 위한 양방향 구문 설탕입니다.이 경우 어떤 이벤트가 호출됩니까?어떤 경우에도 아래 코드에 이벤트와 함께 문자열 출력을 넣을 수 있습니다.

문자열 출력에 대해 다음 코드 구현을 시도해 보십시오.

@Directive({
  selector: '[ngModel]',
  host: {
    "[value]": 'ngModel',
    "(input)": "ngModelChange.next($event.target.value)"
  }
})
class NgModelDirective {
  @Input() ngModel:any; // stored value
  @Output() ngModelChange:EventEmitter; = new EventEmitter() // an event emitter
}

넌 할 수 있다.stringifyngModel에서 다음과 같이 사용할 수 있습니다.

<textarea style="height:100px; width:300px;background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
    </textarea>

ArrayDemo: Array<any> = [{"name":"pardeep","last":"jain"}]
  rapidPage = JSON.stringify(this.ArrayDemo);

작업 예시

브라우저에 표시[object object]angular는 JSON을 해석할 수 없기 때문에 ngModel의 값을 지정할 때 문자열이 필요하므로 이를 변환해야 합니다.JSON.stringify

Import가FormsModule부터@angular/forms문제를 해결합니다.

인app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    FormsModule
  ],
...
})

언급URL : https://stackoverflow.com/questions/37346820/ngmodel-for-textarea-not-working-in-angular-2