필수 유효성 검사기가 비동기 필드와 함께 작동하지 않음

Question

AngularFire 데이터베이스에서 비동기 적으로 업데이트되는 양식 필드에서 "필수"유효성 검사기가 작동하지 않아서 문제가 발생했습니다. 기존 사용자를 편집하려고 할 때 "username"과 "email"입력에 모두 기존 사용자의 값이 포함되어 있어도 Angular는 입력 할 때까지 각 <input>을 비워 둘 것 같습니다. 각각 <input>을 입력 할 때까지 제출 단추가 비활성화되어 있기 때문에이 동작을 볼 수 있습니다.

는 여기에 내가 더 각도가에서 다음 탭을 필드 중 하나에 내 <input>의 비어 있기 때문에 만약 내가 탭을보고 확인할 수 있습니다 여기에 내보기

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

의 내 구성 요소

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { AngularFireDatabase } from 'angularfire2/database'; 

import { User } from './user'; 

@Component({ 
    selector: 'user-form', 
    templateUrl: 'user-form.component.html' 
}) 
export class UserFormComponent { 
    key; 
    item; 
    form: FormGroup; 
    user = new User(); 

    constructor(fb: FormBuilder, private _router: Router, private _route:ActivatedRoute, private db: AngularFireDatabase) { 
     this.form = fb.group({ 
      username: ['', Validators.required], 
      email: ['', Validators.required] 
     }) 
    }; 

    ngOnInit() { 
     this._route.params.subscribe(params => { 
      this.key = params["key"]; 
     }) 

     if (!this.key) { 
      this.title = "New User"; 
     } 
     else { 
      // This is the path that is followed for editing an existing user 
      this.title = "Edit User"; 
      this.item = this.db.object(this.key).valueChanges(); 
     } 
    } 
} 

입니다 아무 것도 입력하지 않으면 오류 메시지를 표시하는 <div>이 나타납니다.

기존 사용자를 편집 할 때 Angular가 내 <input> 둘 모두를 비어있는 것으로 생각하는 이유는 무엇입니까? async 파이프를 사용하고 있기 때문에 "필수"유효성 검사기를 처리해야하는 다른 방법이 있습니까?

Answer 1

콘솔에 오류가 가득해야합니다. FormGroup 내에서 ngModel을 사용할 수 없습니다. 템플릿 기반 양식 (FormsModule) 또는 모델 기반 양식 (ReactiveFormsModule)을 사용하지만 둘 다 서로 사용할 수는 없습니다.

ngModel 및 값 항목을 제거하십시오. ReactiveFormsModule를 사용할 때 폼의 값을 설정하려면 방법 setValue() 또는 patchValue() 사용

this.form.setValue({ 
    username: 'example', 
    email: 'example@gmail.com' 
}); 

또는 단일 FormControl 값을 설정할 수 있습니다

이

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