각 반응 편집 양식 사전 채워진 필드는 여전히 "필수"오류를 유발합니다.

Question

추가 및 편집시 동일한 Reactive Form in Angular를 사용합니다. 내가 필드에 입력하지 아무것도 할 경고 메시지가 나타나면 '추가'

this.form = fb.group({ 
      username:['',Validators.required ], 
      email:['',Validators.required]    
     })     

은 내가 required 유효성 검사기를 사용하고 그것을 잘 작동합니다. 나는 인구가 기존의 값으로 폼을 표시 할 때 내가 필드 touched하고 기존 값을 변경하지 않는 경우에는, 편집 들어, required 오류가 트리거

<form [formGroup]="form" (ngSubmit)="submit()"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input [(ngModel)]="user.name" type="text" class="form-control" 
formControlName="username" value={{(singleUser|async)?.name}}> 
     <div *ngIf="form.controls.username.touched && 
!form.controls.username.valid" class="alert alert-danger"> 
      Username is required 
     </div> 
    </div> 

. 따라서 경고 메시지도 나타납니다.

그러나이 경우 변경하지 않은 기존 값이 있으므로 경고 메시지가 표시되지 않아야합니다.

편집을 위해 사전 입력 된 기존 값에 대해 required 오류가 발생하지 않도록 코딩하는 방법은 무엇입니까?

Answer 1

양식 값을 잘못 설정하고 있습니다. Reactive Forms를 사용할 때 템플릿 대신 프로그래밍 방식으로 작업해야합니다.

this.form.setValue(singleUser) 

를 또는 하나의 폼 컨트롤의 값을 설정합니다 : 그것은 당신이 "..."= 값을 제거해야하고,이 데이터를 페치 한 후 구성 요소에서, 당신이 할 수있는 것을 의미

this.form.get('username').setValue(singleUser.username) 

전체 양식의 값을 설정할 때 .setValue와 오류가 발생할 수 있습니다. 그 이유는 해당 메서드가 FormGroup에 정의 된 것과 동일한 속성을 가진 개체를 필요로하기 때문입니다. 따라서 사용자 이름과 이메일 속성을 가진 객체로 값을 설정해야합니다. 오브젝트가 모든 프로퍼티를 가지지 않을 가능성이있는 경우 대신 patchValue 메소드를 사용하십시오. 이는 단순히 일치하는 속성의 값을 설정하고 추가 속성을 무시합니다. 예를 들어 객체에도 id 속성이있는 경우와 같습니다.

또한 ngModel로 수행중인 작업을 제거해야합니다. 그것은 FormsModule에 속하며, 그들을 혼합하는 것은 나쁜 습관입니다. 이미 양식의 가치가 있습니다.

this.form.value