태그별 글 목록: Angular Forms

angular.io의 resources 메뉴 클릭 UI Components 섹션의 ngx-bootstrap을 클릭 get started 사용법이 잘 나와 있다. ng add를 사용해 부트스트랩 모듈을 추가 가능. 아래 명령으로 앱 설치 ng add ngx-bootstrap –component buttons app.module.ts를 보면 이미 ButtonsModule을 사용할 준비가 되어 있음.(import구문) 원하는 페이지에 해당 요소 복사 ts파일에 singleModel을 On으로 초기화하고, btnCheckboxTrue에는 True(On)을, btnCheckboxFalse에는 False(Off)을 매칭시킴. 버튼의 라벨은 singleModel을 그대로 출력 초기 상태 …

https://app.pluralsight.com/library/courses/angular-forms/table-of-contents 위 강좌를 보며 실습. 이번엔 HTTP Form Posting. 데이터 서비스 만들기 ng generate service data data.service가 추가됨 postUserSettingsForm을 Observable을 활용해 추가(rxjs가 임포트됨) user-settings-form의 constructor에 DataService를 액세스할 수 있도록 함 onSubmit에 Observable의 subscribe를 이용해 콘솔에 result, error 출력 Name을 입력한 후 Send를 클릭 success: 결과가 나타남 HttpClient로 HTTP액세스 app.module.ts의 imports에 HttpClientModule을 추가.(@angular/common/http) data.service에 돌아와서, postUserSettingsForm 메서드의 출력을 변경. post의 파라미터가 …

https://app.pluralsight.com/library/courses/angular-forms/table-of-contents 위 강좌를 보며 실습. 이번엔 중요한 Validation이다. HTML5 필드 검증(브라우저의 기본 기능 활용) 일단 데이터를 null로 초기화 본래라면 꺼져 있는 브라우저 자체의 검증 기능을 ngNativeValidate 스위치로 다시 켬. 폼에 required 옵션을 추가하니 Send 버튼을 눌렀을 때 입력해달라는 경고가 나타난다. pattern에서 정규식 표현을 넣어서 이와 일치하는지 확인 가능. 그 외에도 minlength나, maxlength, 간단히 입력 타입 검사와 범위 지정도 가능. CSS …

Angular Forms: Hello World 위 글에 이어지는 포스트입니다… https://app.pluralsight.com/library/courses/angular-forms/table-of-contents 위 강좌를 보며 실습 NgForm form 태그에 위와 같이 #ngForm으로 ngForm을 사용 최하단에 {{form}} 입력 화면상에는 [object Object]로 나타남. 이를 form | json 포맷으로 출력 JSON 형식으로 출력됨! 화면상의 폼의 내용을 입력해도 value는 업데이트되지 않는 상태. 강좌를 따라가며 구현해봐야겠다. NgModel 별다른 import 없이, ngModel을 input 태그 하나에 적어주고, 출력 시 .value만을 …

오늘부터 다시 앵귤러 공부 시작. https://app.pluralsight.com/library/courses/angular-forms/table-of-contents 위 강좌를 보며 실습. app.module.ts에 FormsModule 추가(import)한 뒤 ng g c user-settings-form 명령으로 모듈 추가 추가한 모듈에 form을 간단히 추가한 뒤 app.component.html에 app-user-settings-form.ts 파일에 있던 selector 명칭으로 태그를 입력 초간단 폼 완성. ——————— 부트스트랩(Bootstrap) 스타일 입히기 참고: 부트스트랩 4.4 폼 npm install –save bootstrap 명령으로 부트스트랩 노드 모듈 추가 angular.json 파일의 styles에 부트스트랩 모듈 …