각도표가 있는 각도 대기 응용 프로그램 - 제2부분

우리는 이미 application의 컨트롤러에서 폼 데이터를 볼 수 있고, 또 다른 방법으로 데이터를 전달할 수 있다는 것을 안다

Pass data with property binding

그러나 각도 양식의 컨텍스트에서는 FormsModule 및 FormGroup를 사용하여 FormControl 인스턴스 세트의 값과 유효성 상태를 추적하기를 원합니다.

기본 양식 유효성 검사
표에서 나온 데이터를 검증할 수 있는 몇 가지 방법이 있다.우리는 우선 required 속성 in outinput 요소를 사용할 것이다.

<input 
  placeholder="Write a task" 
  ngModel 
  name="userInput" 
  required 
/>

MDN에 따르면 required 속성은 "있는 경우 사용자가 입력할 값을 지정해야 소속 양식을 제출할 수 있습니다."
그러나 우리의 상황에서 그것은 매우 비참하게 실패했다...
만약 당신이 Add를 눌렀다면, 그것은 항상 뭔가를 기록할 것이다.
이것은 "기본적으로 Angular는 닫힌 폼 탭에 novalidate 속성을 추가하여 HTML 폼 검증을 비활성화하고 명령을 사용하여 프레임의 검증 프로그램 함수와 일치합니다. 이 속성을 Angular 기반 검증과 결합시키려면 ngNativeValidate 명령을 사용하여 다시 사용할 수 있습니다."라는 이유입니다.
ngNativeValidate 명령을 양식 태그에 추가하고 응용 프로그램을 테스트합니다.

좋지는 않지만 효과는 좋다.

전시물
사용자가 추가한 항목을 표시하기 위해 프로그램에 코드를 추가해야 합니다.
템플릿 파일 app부터 시작합니다.구성 요소html.
지금 바로 표 아래에 다음 코드를 추가합니다.

// app.component.html

...

<ul>
  <li *ngFor="let item of todoList">{{ item }}</li>
</ul>

그것은 어떤 작용을 합니까?
나는 네가 익숙하다고 가정한다ul and li tags.
더 재미있는 것은 ngFor stuff입니다.만약 익숙하지 않다면, 이렇게 *ngFor 문법을 읽을 수 있습니다. todoList의 모든 항목에 대해 새 <li> 를 만들고, 이 항목을 새로 만든 <li> 에 추가할 수 있습니다.
토도리스트는 어디에 있습니까?우리 아직 아니야.그러나 말 그대로 todoList는 사용자가 만든 모든 항목을 포함합니다.AppComponent에 todoList라는 배열을 추가합니다.

// app.component.ts

...
export class AppComponent {
  userInput = '';
  todoList = ['Study Angular', 'Add one elememt', 'Correct typo'];

  onSubmit() { ... }
}

userInput의 값을 todoList 배열에 연결하도록 onSubmit을 수정합니다.

// app.component.ts

...
onSubmit() {
    this.todoList = this.todoList.concat(String(form.form.value.userInput));
  }

전반적인 개선 사항
다음과 같은 결과를 위해 몇 줄의 코드를 추가할 것입니다.

todoList가 하나의 대상 그룹이 됨

todoList의 모든 대상은 유일한 id, 작업, 선택 가능한 날짜를 포함합니다

UI에서 항목 삭제 가능

// app.component.ts

...
export class AppComponent {
  title = 'Ng To Do';
  userInput: string;
  dateInput: string;
  todoList: { id: number; title: string; date?: string }[] = [
    { id: 1, title: 'Study Angular' },
    { id: 2, title: 'Add one elememt' },
    { id: 3, title: 'Correct typo' },
    { id: 4, title: 'Add dates', date: '2022-09-10' },
  ];

  onSubmit(form: NgForm) {
    this.todoList = this.todoList.concat({
      id: Math.random(),
      title: form.form.value.userInput,
      date: form.form.value.date,
    });
    console.log('Submitted', form.form.value);
  }

  onDelete(id: number) {
    this.todoList = this.todoList.filter((item) => item.id !== id);
  }
}

이것은 반드시 표를 처리하는 가장 좋은 방식은 아니다.우리는 곧 우리의 통제에 대해 조를 나누기 시작할 것이다.
todoList에는 { id: number; title: string; date?: string }[] 유형이 있습니다.형식은 하나의 대상 그룹입니다. 대상마다 id와 제목을 포함해야 합니다.date 속성 date? 뒤에 물음표를 추가하면 이 속성을 선택할 수 있는 속성으로 만들 수 있습니다.
onSubmit에서 UI의 값을 사용하여 새 객체를 만듭니다.그런 다음 객체를 todoList에 연결합니다.
onDelete 방법은number 형식의 id 파라미터를 사용하여 이 id와 관련된 항목을 삭제합니다.
우리의 템플릿은 다음과 같이 변경되었다

// app.component.html

<h1>{{ title }}</h1>

<form (ngSubmit)="onSubmit(myForm)" #myForm="ngForm" ngNativeValidate>
  <label for="userInput">Add Task</label>
  <input placeholder="Write a task" ngModel name="userInput" required />
  <label for="date">By when</label>
  <input type="date" name="date" ngModel />
  <button type="submit">Add</button>
</form>

<ul>
  <li *ngFor="let item of todoList">
    <button (click)="onDelete(item.id)">X</button>
    {{ item.title }} {{ item.date && 'by' }} {{ item.date ? item.date : '' }}
  </li>
</ul>

우리는 각각 li 요소에 단추를 추가했다.단추를 누르면 onDelete 방법을 터치하고 삭제할 요소의 id를 전달합니다.
나머지 코드{{ item.date && 'by' }} {{ item.date ? item.date : '' }}는 데이터를 조건부로 처리하는 다양한 방식을 표시하기 위해 코드를 추가했다.
JavaScript에서 logical AND (&&) 조건이 true일 때만 & & & 의 오른쪽에 값을 표시할 수 있는 조건을 만들었습니다.
conditional (ternary) operator는 데이터를 조건부로 처리하는 또 다른 방법이다.

양식 컨트롤 그룹화
특히 각도 형태는 그룹 제어 가능성을 제공했다.그룹 컨트롤은 사용자 설정 파일 데이터, 사용자 설정 등 정보를 분류별로 그룹화하는 데 도움이 될 수 있습니다.
폼이 매우 작기 때문에, 우리는 설명 입력과 탭을 추가했다.
그리고 userInput과taskDescription과 관련된 모든 요소를 div 표시줄에 포장합니다.우리는div에 ngModelGroup="taskInfo"를 추가하여 그 중의 원소를 그룹으로 나누었다.

// app.component.html

...
<div ngModelGroup="taskInfo">
    <label for="userInput">Add Task</label>
    <input placeholder="Write a task" ngModel name="userInput" required />
    <label for="taskDescription">Description</label>
    <input
      placeholder="Steps to complete the task"
      ngModel
      name="taskDescription"
    />
</div>

양식의 값 객체를 기록하여 결과를 볼 수 있습니다.

Angular는 userInput 및 taskDescription 값을 포함하는 또 다른 객체인taskInfo 필드를 생성합니다.
컨트롤에서 유사한 필드를 볼 수 있습니다.이것은 그룹의 컨트롤의 모든 속성을 가지고 있기 때문에 매우 멋있다.이것은 우리가 전체 원소 그룹에 대한 응용 형식을 검사할 수 있다는 것을 의미한다. 예를 들어 touched 또는 dirty.
그룹이 touched인 경우 일부 요소를 렌더링할 수 있습니다.

마무리
각도 형태를 사용하려면 다음이 필요합니다.

AppModule

에서 FormsModule 가져오기

모든 폼 요소를 폼 라벨로 포장하기

선언 컨트롤: 추가ngModel와 컨트롤 이름

을 통해 각 컨트롤을 선언합니다.

노출 폼 대상: 폼 탭#myForm="ngForm"에 ngForm과 같은 로컬 인용을 설정합니다

제출: 반에 데이터를 전달하기 위해 표를 제출한다.이벤트 바인딩 사용 가능(ngSubmit)="onSubmit(myForm)"

그룹 컨트롤: 원소를 분류별로 나누기를 원할 수도 있습니다.ngModelGroup="group-name"로 그룹을 나누는 요소를 포장합니다.