각 반응성 폼의 formModel에 유효성 검사기를 추가하는 방법

Question

나는 반응 형 폼 튜토리얼을 따르고 있으며 폼 그룹 정의에 클래스 모델을 사용할 때 required 또는 다른 유효성 검사기로 속성을 만드는 방법을 알고 싶습니다.

https://angular.io/guide/reactive-forms#the-data-model-and-the-form-model

나는이 초기 값으로 기본 빈 문자열을 작성하는 것으로 나타났습니다. 기본값없이 주소 모델을 정의 할 수없는 이유는 무엇입니까? 그렇지 않으면 오류가 발생합니다. 예 : 나는 street: string라고 말할 수 없다. 기본적으로 기술적으로 필요한 유효성 검사를 수행한다고 가정합니다. 그러나 실제 사용 사례는 아닙니다.

기본적으로 기본값없이 클래스 모델을 정의하고 주소 및 특정 주소 필드를 필요로하는 것이 이상적입니다. 이것은 반응 형 및 양식 모델을 사용하여 가능합니까?

export class Address { 
    street = ''; 
    city = ''; 
    state = ''; 
    zip = ''; 
} 


this.heroForm = this.fb.group({ 
    name: ['', Validators.required ], 
    address: this.fb.group(new Address()), // <-- How to make address and certain address fields required? 
    power: '', 
    sidekick: '' 
}); 

Answer 1

당신은 공급자 추가 객체가 검증 또는 비동기 검증을 추가 할 수 있습니다

this.heroForm = this.fb.group({ 
    name: ['', Validators.required ], 
    address: this.fb.group(new Address(), { validator: Validators.required }), // <-- How to make address required? 
    power: '', 
    sidekick: '' 
}); 

(문서 here 참조) 그러나이 "새로운 ADRESS()"로 작동하지 않습니다 필요한이 경우에이다 따라서 null 또는 정의되지 않은 객체입니다.

당신은 잘 ADRESS 클래스

const adressValidator = (fg: FormGroup) => { 
     test = fg.value; 

     if (!test.street || !test.city || ...) { 
      return { adress: { valid : false }}; 
     } 
    } 

    and 

    this.heroForm = this.fb.group({ 
     name: ['', Validators.required ], 
     address: this.fb.group(new Address(), { validator: adressValidator}), // <-- How to make address required? 
     power: '', 
     sidekick: '' 
    }); 

에 대한 사용자 지정 유효성 검사기를 만들 필요는

희망이 도움