代码之家 › 专栏 › 技术社区 › CE0

角度修补值未设置输入字段值

formbuilder angular5 typescript angular

2

CE0 · 技术社区 · 8 年前

我试图通过窗体组使用设置输入值 patchValue() 但是输入仍然是空白的,这是我的代码示例…

组件.html

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" [(ngModel)]="storeProfile.user" [formControl]="createStoreForm.controls['user']" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

组件.ts

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(fb: FormBuilder, private storeSrv: StoreService, private router: Router) {
    this.createStoreForm = fb.group({
      'user': ['', Validators.required],
    });
  }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

  this.createStoreForm.patchValue({
    'user': this.userId.id,  // this.userId.id = undefined here
  });
 }
}

传递价值的正确方法是什么 localStorage 到 input field 在表格上?

2 回复 | 直到 8 年前

1

Muhammed Albarmavi 8 年前

只需删除ngmodel并使用createStoreForm.value从值中获取

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" [formControl]="createStoreForm.controls['user']" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(fb: FormBuilder, private storeSrv: StoreService, private router: Router) {
    this.createStoreForm = fb.group({
      'user': ['', Validators.required],
    });
  }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

  this.createStoreForm.patchValue({
    'user': this.userId.id,  
  });
 }

 public createStore(){
  console.log(this.createStoreForm.value); // get from values 
 }
}

2

1

Pardeep Jain 8 年前

您需要在像这样从本地存储获取值之后设置值,

试试这个-

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(public fb: FormBuilder, private storeSrv: StoreService, private router: Router) { }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

    this.createStoreForm = this.fb.group({
      'user': [this.userId.id, Validators.required],
    });
 }
}

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" formControl="user" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>