Angular 反应形式 patchValue 或 setValue 不工作 - Angular 10

Question

我正在使用 Reactive 表单，一切都很好，但是当我修补值时，它们没有更新。我也尝试了 patchValue 和 setValue，但似乎没有任何效果。下面是我的代码

    ngOnInit(){
    this.profileForm = this.fb.group({
          'name': ['', Validators.required],
          'email': ['', [Validators.required, Validators.email]],
          'phNumber': ['', Validators.required],
          'gender': ['', Validators.required],
          'address': ['', Validators.required],
          'city': ['', Validators.required],
          'state': ['', Validators.required],
          'pincode': ['', Validators.required]
        });
    }

补丁值

    let response = res['expert'];
          this.profileForm.setValue({
            name: response.full_name,
            email: response.expert_email,
            phNumber: response.expert_mobile,
            address: response.addresss,
            city: response.city,
            state: response.state,
            pincode: response.pincode,
            gender: response.id_gender
          });

如果我使用 setValue

会出现此错误

如果我使用 patchValue，就会设置表单值，

    after = {"name":"Test Name","email":"testa@gmail.com","phNumber":"9632587410","gender":1,"city":"Adilabad","state":"ANDHRA PRADESH","pincode":"2352"}

    <section class="marginBoxModelForProfile">
        <form [formGroup]="profileForm">
            <h6 class="text-left circularBold"><b>Complete Profile Details</b></h6>
            <p class="text-left circularBold grey5F font-size14">Min 300 Rs. Explanation about how they can choose and
                why they should choose the right fields. A link and details on how to join will be included in your
                booking confirmation email.</p>
            <input type="text" class="education-inputs w-100 mt-3" placeholder="Name" formControlName="name"
                [ngClass]="{'input-error': submitted && profileForm.controls.name.invalid}">
            <div class="mt-3 text-left">
                <!-- <ng-container *ngFor="let gender of genders">
                    <input type="radio" name="gender" id="gender" class="mr-1" value="">
                    <span class="mr-5" formControlName="gender">
                        {{gender.gender_name}}
                    </span>
                </ng-container> -->
                <input type="radio" name="gender" id="gender" class="mr-1" [value]="1" (change)="onChangeGender($event)"> <span class="mr-5"
                    formControlName="gender">Male</span>
                <input type="radio" name="gender" id="gender" class="mr-1" [value]="2" (change)="onChangeGender($event)"> <span class="mr-5"
                    formControlName="gender">Female</span>
                <input type="radio" name="gender" id="gender" class="mr-1" [value]="3" (change)="onChangeGender($event)"> <span class="mr-5"
                    formControlName="gender">Other</span>
            </div>
            <div class="input-group mt-3">
                <div class="input-group-prepend">
                    <span class="input-group-text contactNumber-addon" id="basic-addon1"
                    [ngClass]="{'input-error': submitted && profileForm.controls.phNumber.invalid}">+91</span>
                </div>
                <input type="text" class="form-control contactnumber-input" placeholder="Contact Number"
                    aria-label="contactNumber" aria-describedby="basic-addon1" formControlName="phNumber"
                    [ngClass]="{'input-error': submitted && profileForm.controls.phNumber.invalid}">
            </div>
            <input type="email" class="education-inputs w-100 mt-3" placeholder="Email" formControlName="email"
                [ngClass]="{'input-error': submitted && profileForm.controls.email.invalid}">
            <input type="text" class="education-inputs w-100 mt-3" placeholder="Address" formControlName="address"
                [ngClass]="{'input-error': submitted && profileForm.controls.address.invalid}">
            <p class="font-size12 grey8E circularBook text-left mt-2">We use this detail to generate invoices and use it
                for tax purposes.</p>
            <div>
                <input type="text" class="education-inputs w-100 mt-3" placeholder="Pincode" formControlName="pincode"
                    [ngClass]="{'input-error': submitted && profileForm.controls.pincode.invalid}"
                    (change)="onChangePincode($event)">
            </div>
            <div class="text-left">
                <select name="city" id="city" class="education-inputs mt-3 mr-1 w-50" formControlName="city"
                    [ngClass]="{'input-error': submitted && profileForm.controls.city.invalid}">
                    <option value="{{city}}">{{city}}</option>
                </select>
                <select name="state" id="state" class="education-inputs mt-3 state-dropdown" formControlName="state"
                    [ngClass]="{'input-error': submitted && profileForm.controls.state.invalid}">
                    <option value="{{state}}">{{state}}</option>
                </select>
            </div>
            </div>
        </form>
    </section>

我也用过patchValue，请大家指正我做错了什么。我正在使用 v10.

非常感谢任何帮助。

提前致谢！

Answer 1

第一个错误

问题是response.address的值是undefined

正如您所说，您可以简单地使用 patchValue() 来设置所有定义的值，这应该可以正常工作

如果出于任何原因需要使用 setValue，则可以将行 address: response.address, 更改为

 address: response.address ?? '',

我们只是检查 address 的值是否存在，如果不存在则将其设置为 ''

第二个错误

考虑下面的代码

 <input type="radio" name="gender" id="gender" class="mr-1" value="">
    <span class="mr-5" formControlName="gender">{{gender.gender_name}}</span>

由于错误指出 span 元素没有 ValueAccessor 只需将 formControlName="gender" 属性移动到 input 标签

 <input  formControlName="gender" type="radio" id="gender" class="mr-1" [value]="gender.value">
    <span class="mr-5">{{gender.gender_name}}</span>

See this Solution

第三non-error期

我看到你在使用以下内容：

(change)="onChangePincode($event)"

如果您使用的是响应式表单，则可以订阅该表单，并且无需直接在 html 中使用 (change) 即可处理此表单。它有一个 formControlName，所以如果你订阅了表单更改，你可以在你的 html.

中取消它

Answer 2

patchvalue和setvalue方法用于绑定控件中的值。

如果您得到所有​​形式控件值的响应，您将使用 setValue method.otherwise 您将使用 patchvalue 方法