Question

我要在用户编辑时以表单形式显示和显示值，请帮助我如何以角度显示值。

edit-blog.component.ts

import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
@Component({
  selector: 'app-edit-blog',
  templateUrl: './edit-blog.component.html',
  styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
  editBlogForm: FormGroup;
  users: User[] = [];
  submitted = false;
  constructor(private router: Router,
    private formBuilder: FormBuilder,

    private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }
    get f() { return this.editBlogForm.controls; }
  ngOnInit() {
    this.editBlogForm = this.formBuilder.group({
      title: [this.users, Validators.required],
      blog: [this.users, Validators.required],
    });
  }
  //get f() { return this.editBlogForm.controls; }
  editUserBlog(id:number) {
    this.userService.editUserBlog(id).pipe(first()).subscribe(users => {
      users = users;
      console.log(users);
    });

  }
  onSubmit(user: User) {
    this.userService.update(user).subscribe(user => {
      user = user;

    });
  }


}

下面是我的edit-blog.componet.html，我想以这种形式显示价值，请帮助如何显示价值。

edit-blog.component.html

<div>
    <div class="container">
        <div class="row">

            <div class="col-sm-3">
            </div>
            <div class="col-sm-6" style="margin-top: 60px">
                <h2>Update your blog here..</h2>
                <form [formGroup]="editBlogForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <input type="text" [(ngModel)]="users.title" formControlName="title" class="input" [ngClass]="{ 'is-invalid': submitted && f.title.errors }"
                            placeholder="Title" />
                        <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                            <div *ngIf="f.title.errors.required">Title is required</div>
                        </div>
                    </div>
                    <div class="form-group">

                        <app-ngx-editor type="text" formControlName="blog" height="250px" minHeight="50px" class=""
                            [placeholder]="'Enter text here...'" [spellcheck]="true" [ngClass]="htmlContent"></app-ngx-editor>
                        <div *ngIf="submitted && f.blog.errors" class="invalid-feedback">
                            <div *ngIf="f.blog.errors.required">Blog is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Update</button>

                    </div>
                </form>

            </div>

            <div class="col-sm-3">

            </div>

        </div>
    </div>
</div>

编辑表单时我没有获得价值，请帮助我如何提前显示.thnk值。

Answer 1

首先，这里是有关表格的角度文档的链接：Forms Overview in Angular

在Angular中，有两种主要的创建表单的方法-反应性方法和模板驱动方法。首先，您必须决定要首先采用哪种方法。

反应式方法是一种编程方法，您的表单是在.ts文件中创建的，并与HTML表单模板同步，并应用了诸如formGroup（在开始表单标签中）和formControlName之类的指令，这些指令附加到您设置的值上在您的.ts文件及其各自的输入标签中。

由模板驱动的方法主要在模板即.html文件中完成。...在这种情况下，指令[ngModel]用作formControl，并且存在html“ name”属性以帮助您跟踪控制台上的表单对象中的表单值。

但是，要在表单中显示预设值，请确定您要首先采用的方法。对于TD方法-只需使用HTML属性“值”并将其设置为所需的值。例如用于输入用户名； value =“ Benneee” .... 对于Reactive方法-在声明FormGroup对象的类型之后，代替将form对象分配给其定义的值并分配不同的formcontrol名称，可以执行以下操作： “用户名”：new FormControl（“ Benneee”）;

我希望这对您有所帮助，或者至少可以为您指明正确的方向。

Answer 2

另外一件事，Dinesh：

再三考虑，请仔细阅读我的第一条消息并仔细理解，然后我认为您应该从该HTML模板中删除该ngModel指令。

然后在ngOnInit文件中的.ts文件中，只需执行以下操作：

console.log('my form: ', this.editBlogForm)

那应该可以解决这个问题。

用户使用angular在表单中进行编辑时如何显示值

2 个答案: