相关疑难解决方法(0)

角度版本：6.1

我正在尝试使用Kara Erickson 所称的 Composite ControlValueAccessor 来实现自定义控件，如演示文稿Angular Forms – Kara Erickson – AngularConnect 2017 中所示。控件的值应设置为两个子输入值之一。

这个问题writeValue()似乎只在最初被调用，而不是在进一步的价值变化上。

这是一个stackblitz 演示。

表单.html

<form #f="ngForm" (ngSubmit)="f.form.valid && Submit(f)">
    <confirm-password name='password' ngModel #pwd='ngModel'></confirm-password>
    <div>{{pwd.status}}</div>
</form>

确认密码.html

<div [formGroup]='pass'>
  <label>Password:
    <input type="password" formControlName='pwd1' (blur)='onTouched()'>
  </label>
  <div *ngIf="controlDir.touched && controlDir.control.errors?.required" 
         class="error">Password is required.</div>

  <label>Please re-enter password:
    <input type="password" formControlName='pwd2' (blur)='onTouched()'>
  </label>
  <div class='error' *ngIf='controlDir.touched && controlDir.control.errors?.notEqual && 
                            !controlDir.errors?.required'>Passwords do not match.</div>
</div>

确认-password.ts

import { Component, Self, OnInit, OnDestroy …

我正在尝试创建一个材质下拉包装器（mat-select dropdown），它将与 formControlName 一起使用。如果某人的库中有 Stackblitz，可以发布他们的 Stackblitz 吗？随意从头开始，并创建自己的答案，只要符合要求即可。

要求：

1）需要与formControlName一起使用。我们有带有 formBuilder 的父组件表单及其验证器，它试图引用这个子包装器。作为典型场景，父组件表单构建器还有许多其他表单字段。

2) 如果数据不满足父 FormBuilder 验证器的要求，则需要显示红色无效错误。

3) a) 不仅需要与 formControlName/patchValue 一起使用（patchValue 应该与整个类一起使用）；b) 如果有人将数据放入 @Input() SelectedValueId Id 数字，也可以选择。可以和两个一起工作

试图让它工作，但还没有成功，有人有任何代码来解决这个问题吗？

需要工作 stackblitz，才能获得成功的答案，

在本例中，Id 是 sourceOfAddressId

export class SourceOfAddressDto implements ISourceOfAddressDto {
    sourceOfAddressId: number | undefined;  // should work with this Id
    sourceOfAddressCode: string | undefined;
    sourceOfAddressDescription: string | undefined;

打字稿：

@Component({
    selector: 'app-address-source-dropdown',
    templateUrl: './address-source-dropdown.component.html',
    styleUrls: ['./address-source-dropdown.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => AddressSourceDropdownComponent),
            multi: true
        }
    ]
})
export class …