로그인 인터페이스용 구성 요소 선택기:cx-update-profile
해당 구성 요소 이름 찾기 UpdateProfileComponent:
구성 요소에는 FormGroup의 인스턴스가 하나만 있습니다.
서비스 형식에 값이 할당되는 시점은 언제인가요? 양식 빌더를 사용하는 대신 Service 클래스에서 복사하여 FormGroup 인스턴스를 수동으로 만듭니다. FormGroup생성자 는 JSON 객체를 매개변수로 받고, 키는 HTML에 바인딩된 컨트롤의 이름이고, 값은 이러한 컨트롤의 초기 값입니다.
이 양식 그룹은 다음에 의해 patchValue할당 .
테스트 URL:
http://localhost:4299/electronics-spa/en/USD/my-account/update-profile
formControlName지시문 을 통해 HTML의 입력 요소를 구성 요소의 FormControl 인스턴스에 바인딩합니다.
이 서버 클래스에는 다음과 같은 is사용법 .
protected user$ = this.userProfile
.get()
.pipe(filter((user): user is User => Boolean(user)));
is여기 에 기능이 있습니다. 이 링크type guard 를 참조하십시오 .
다음 예를 고려하십시오.
function isString(test: any): test is string{
return typeof test === "string";
}
function example(foo: any){
if(isString(foo)){
console.log("it is a string" + foo);
console.log(foo.length); // string function
}
}
example("hello world");
isString이 호출된 후 함수가 true를 반환하면 입력 매개변수 test가 실제로 . 이때 TypeScript 컴파일러는 isString보호된 IF 코드 블록 foo에서 이어야 한다고 간주 string하므로 다음을 수행할 수 있습니다. 이 문자열 변수의 길이 속성을 사용하여 직접 액세스할 수 있습니다.
Setvalue 및 Patchvalue는 Angular Formgroup의 메서드입니다. 둘 다 양식 그룹의 컨트롤 값을 설정합니다. 명백한 차이점은 setvalue는 특정 컨트롤을 제거할 수 exclude없지만 patchvalue는 제거할 수 있다는 것입니다.
이름과 연령이라는 2개의 컨트롤이 있는 양식 그룹이 있다고 가정해 보겠습니다.
한 컨트롤의 값을 설정하려는 경우에는 작동하지 않으므로 두 컨트롤의 값을 설정해야 합니다.
formgroup.setValue({
name: ‘Mocrosoft’, age: ‘25’});
양식 그룹에 상당한 수의 양식 제어 인스턴스가 포함된 setValue경우 이러한 인스턴스의 모든 값을 setValue의 입력 매개변수로 열거할 필요가 있습니다.